How to Make Rounded Corners With CSS

By / Updated: Sep 14, 2020 /
  • 5 out of 5 Stars
Published in: CSS

Sometimes it is a good design solution to have some elements on the page with corners slightly rounded. It can give them a better and softer look. In this simple tutorial we will explain how it can be achieved with pure CSS — and show you live examples.

CSS Round Corners

The Old Way: Using Rounded Images

In the earlier times, 10 or 15 years ago, when CSS was not as advanced as now, webmasters was doing rounded corners using images. They was making images for all four corners, and applying them to some container with background-image.

There were many websites for simplifying this (most of them are not operating today), for example, RoundedCornr. The webmaster could choose a corner radius and desired colors, and the website generated four image files and the necessary HTML and CSS code to put rounded corners around the content.

If you are curious, you can read about this technique here.

The Modern Way: Using border-radius Property

With CSS 3 the things have been made simpler. Native support for rounded corners was added, and now it is possible to achieve with pure CSS. There are several CSS properties to handle rounded corners, the most known and the most used is border-radius. Its full syntax is as follows:

border-radius: border-top-left-radius border-top-right-radius 
border-bottom-right-radius border-bottom-left-radius
where the border-*-radius values define the radii of a quarter ellipse that defines the shape of the corner and could be a length (example: 3px) or a percentage (example: 5%).

It is not necessary to specify all radius values for all four corners. You can supply:

  • One value, which will be used for all corners:
    border-radius: 10px;
  • Two values: first is for top left and bottom right corners, and the second is for top right and bottom left corners:
    border-radius: 10px 20px;
  • Three values: first is for top left corner, second — for both top right and bottom left corners, and third for the bottom right corner.
  • Four values: radius is specified for all four corners in the standard CSS clockwise order: top left, top right, bottom right and bottom left corner.

You can also make elliptical corners by specifying the horizontal radius and the vertical radius divided by slash (see example below).

Online Press Release Service.

For full documentation on border-radius property, consult the W3 website.

Code examples

It's always better with an example, so let's go to the the CSS code.

Constant border-radius for all corners

<div style="border: 3px solid red; border-radius: 20px;
width: 300px; height: 100px;></div>

Two values of border-radius

<div style="border: 3px solid orange; border-radius: 60px 0;
width: 300px; height: 100px; padding: 10px; margin: 5px 0"></div>

Mixed border-radius

<div style="border: 3px solid green; border-radius: 50% 5px 5% 0;
width: 300px; height: 100px"></div>

Elliptical

<div style="border: dashed blue; border-width: 2px 4px;
border-radius: 13em/3em; width: 300px; height: 100px; line-height: 100px;
text-align: center">Rounded corners are easy!</div>
Rounded corners are easy!

Bonus: CSS circle

<div style="border: 3px solid purple; border-radius: 50%;
width: 200px; height: 200px; line-height:200px; text-align: center">
This is a round div!</span></div>
This is a round div!

border-radius vs -moz-border-radius vs -webkit-border-radius vs -ms-border-radius vs -o-border-radius

Sometimes you can meet the CSS code containing the alternative CSS properties — -webkit-border-radius, -moz-border-radius and so on.

These are the vendor-prefixed properties offered by the corresponding rendering engines (-webkit for Chrome and Safari; -moz for Mozilla (Firefox and Gecko), -o for Opera, -ms for Internet Explorer). They were introduced for experimental CSS declarations support.

Sometimes you can see all of them together:

.rounded
{  
 -moz-border-radius: 2em;
 -ms-border-radius: 2em;
 -o-border-radius: 2em;
 -webkit-border-radius: 2em;
  border-radius: 2em;
}

Nowadays it is recommended to use single border-radius, because it is the CSS standard now and works with all modern browsers (check on caniuse). Also, there is a global trend to avoid using the vendor prefixes.

Online Press Release Service.

Rate This Article

How would you rate the quality of this content?
Currently rated: 5 out of 5 stars. 1 user has rated this article. Select your rating:
  • 5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5

About The Author

Lembit Kuzin is a software developer from Estonia. He is passionate about new technologies, web development and search engine optimization. He has over 10 years of webdev experience and now writes exclusive articles for Webmaster Tips.
Get a 15 Day Free Trial at 3DCart.com