Rounded Corners on Images

The CSS property border-radius adds rounded corners on images. You can round all of the image's corners or just select corners, vary the radius on different corners or display an image in the shape of an oval or a circle.

1. Add the image to your page.

Need help inserting an image?

2. Add a class to your image

This way, your styles will only target elements with that class.

Note: If you are using the grid system on your page, and you want your image to always take up the full width of the column that contains it, also add the class dcf-w-100%

3. Style your corners.

The border-radius CSS property is what adds the rounded corners.

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

Here's what it looks like:

You can experiment with different values to get it the way you like.

If you want it to be a circle, add border-radius: 50%;. This will only make a circle if you are starting with a square image.

If you want different corners on your image to be rounded differently from each other, it's possible to target them individually. In the previous examples, when you declare one value for border-radius, it applies that to all the corners. But you can list out four different values for the different corners.

border-radius: 10px 20px 30px 40px;

The order of the numbers goes clockwise starting from the top left corner: top left, top right, bottom right, bottom left.

Here are some examples of images with border radius values that are different for different corners:

4. When you have the corners looking the way you want, add your styles to your site's CSS

Inside of UNLcms, go to the Appearance section of your site and click "Settings."

Paste your styles into the CSS box at the top, then scroll down to the bottom of the page and hit "Save Configuration".

The finished product

The HTML

<img src="img/nilo-ren.jpg" alt="Cat" class="rounded-corners" />

The CSS

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