Written by: Becky Aiken | IANR Media
1. Add the image to your page.
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
3. Style your corners.
border-radius CSS property is what adds the rounded corners.
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:
border-radius: 120px 20px 120px 20px;
border-radius: 40px 40px 0 0;
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."
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
<img src="img/nilo-ren.jpg" alt="Cat" class="rounded-corners" />