It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Border-Radius Property

Reading time 2 min
Published Aug 8, 2017
Updated Oct 1, 2019

Understanding CSS border-radius

By using the CSS border-radius property, you can define rounded corners for an element:

Example
div {
    border: 3px solid;
    border-radius: 30px;
}

It is actually a shorthand for four CSS border radius subproperties:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

Each of these subproperties could be used to style each corner individually:

Example
div {
    border: 4px solid green;
    border-top-left-radius: 4em;  	
}
Example
div {
    border: 4px solid green;
    border-top-right-radius: 4em;
}

If you add rounded corners for an element that has a background color or a background image, it will be rounded with the border as well and not leak over its lines:

Example
#roundcorners {
    border-radius: 30px;
    background: url(sheet.gif);
    background-position: center top;
    background-repeat: repeat;
    padding: 25px; 
    width: 250px;
    height: 200px; 
}

Syntax for CSS border-radius

The syntax for border-radius is simple:

border-radius: value1 value2 value3 value4;

The values can be defined in either length units or percentages. You can specify one, two, three, or four of them:

Syntax Example Explanation
One value border-radius: 3px; All four corners are modified in the same manner.
Two values border-radius: 3px 6px; The first value is used to modify the top left and the bottom right corners.
The second value is used to modify the top right and the bottom left corners.
Three values border-radius: 3px 6px 9px; The first value is used to modify the top left corner.
The second value is used to modify the top right and the bottom left corners.
The third value is used to modify the bottom right corner.
Four values border-radius: 3px 6px 9px 12px; The first value is used to modify the top left corner.
The second value is used to modify the top right corner.
The third value is used to modify the bottom right corner.
The fourth value is used to modify the bottom left corner.

Ellipse corners with border-radius

In some cases, you might not need the corners to be perfectly round. To create elliptical rounding, define two values for the CSS border-radius property and put a slash (/) between them. The first value will specify the horizontal radius for the corner, and the second one will define the vertical radius:

Example
#example1 {
    border: 5px solid green;
    padding: 10px;
    border-radius: 3em;
}

#example2 {
    border: 5px solid red;
    padding: 10px;
    border-radius: 3em/6em;
}

Browser support

Browser image
Chrome
4+
Browser image
Edge
12+
Browser image
Firefox
4+
Browser image
IE
9+
Browser image
Opera
10.5+
Browser image
Safari
5+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
11+
Browser image
Safari
All