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. Add one or both of the CSS rules below, depending on whether you want rounded corners on columns, photos, or both.
    There are several places you can add CSS. See the article on where to put custom CSS code.
  4. 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;
}