🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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.
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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