Round corners on columns and photos

You can add rounded corners to a column background or border or a photo. The CSS rule applies to the <img> tag, so the photos can be placed in any module, as long as they are converted to <img> in the HTML. 

Tip: you can add other effects to photos, such as cropping them into a circle, in the Photo module. Click Crop on the General tab and choose a cropping option.

To add rounded corners to a column background or photo:

  1. Open the column or Photo module for editing and click the Advanced tab.
    If it's a column, ensure you've assigned a border or a background color on the Style tab.
  2. Scroll to the CSS selectors section and enter a name in the Class field.
    It's a best practice to add a custom prefix to your class names to avoid conflict with other class names used by the theme and plugins. In this example, we'll use the class name ss-rounded-corners. Save the column or module settings and repeat this step for every item that you want to have a rounded corner.
  3. In the upper right corner, click Tools, and do one of the following:
    • If you only want to round the corners for items on a single page, click Layout CSS / JavaScript.
    • If you want to round the corners throughout your site, click Global Settings > CSS.
  4. Add one or both of the CSS rules below, depending on whether you want rounded corners on columns, photos, or both.
    Replace the class name with your own class name, and increase the number of pixels if you want rounder corners.
  5. Click Save.

Column Background

.ss-rounded-corners > .fl-col-content {
    border-radius: 10px;
}

Photos

.ss-rounded-corners img {
    border-radius: 5px;
}