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.
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 07/12/2020
3176 People Used
Only 97 Left
Rating
5.0