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. The following screenshot shows both rounded column corners and rounded corners for the image in a Callout module.

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

To add rounded corners to a column background or photo:

1. Open the column or module for editing.
   If it’s a column, ensure you’ve assigned a border or a background color on the Styletab.
2. Click the Advanced tab and scroll down to the HTML Element section.
3. 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.;
4. Save the column or module settings and repeat this step for every item that you want to have a rounded corner.
5. 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 Related Article below about where to put custom CSS code.
6. Replace the class name with your custom class name, and increase the number of pixels for border-radius if you want rounder corners.
7. Click Save.

Column Background

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

Photos

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