Rounded Corners on Images

Written by: Becky Aiken | IANR Media

1. Add the image to your page.

Add your image to the page in UNLcms

Need help inserting an image?

2. Add a class to your image

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

Add a class to your image in the HTML editor

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 wdn-stretch

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:

Cat

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

Cat
border-radius: 5px;
Cat
border-radius: 50px;
Cat
border-radius: 75px;


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.

Cat
border-radius: 50%;
Cat
border-radius: 50%;


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.

Cat1234

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:

Cat
border-radius: 120px 20px 120px 20px;
Cat
border-radius: 40px 40px 0 0;
Cat
border-radius: 0 50% 50% 50%;

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."

The appearance page with the settings button in UNLcms

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

The appearance settings page where you place your CSS

The finished product


Cat

The HTML


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

The CSS

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

Page Feedback

Was this article helpful?