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

Code has been added to clipboard!

CSS Rounded Corners: Learn to Apply Border Radius to Any Element

Reading time 2 min
Published Nov 17, 2016
Updated Jan 21, 2020

TL;DR – CSS rounded corners are added to elements to round their sharp edges and create shapes such as a rounded rectangular.

CSS Rounded Corners: Main Tips

  • CSS border-radius adds rounded corners to HTML elements.
  • The CSS rounded borders are noticeable if the colors of background or borders differ from the colors that surround the rounded element.

The border-radius Property

The border-radius property can give rounded corners to almost any HTML element. For instance, the CSS rounded effect is available for images and backgrounds as well.

This example assigns border-radius to:

Example
#roundc1 {
    border-radius: 30px;
    background: #5e37bc;
    padding: 15px; 
    width: 250px;
    height: 200px; 
}

#roundc2 {
    border-radius: 30px;
    border: 3px solid #5e37bc;
    padding: 15px; 
    width: 250px;
    height: 200px; 
}

#roundc3 {
    border-radius: 30px;
    background: url('https://cdn.bitdegree.org/learn/space.jpeg?229dfb2d');
    background-position: left top;
    background-repeat: repeat;
    padding: 15px; 
    width: 250px;
    height: 200px; 
}

Note: the CSS rounded borders do not work with the table elements that have the border-collapse property set to collapse.

This table consists of the properties for setting CSS rounded borders to all four edges or only to left, right, bottom, or top sides:

Property Description
border-radius A shorthand property for setting CSS rounded corners
border-top-left-radius Determines the top-left border shape
border-top-right-radius Determines the top-right border shape
border-bottom-right-radius Determines the bottom-right border shape
border-bottom-left-radius Determines the bottom-left border shape
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

Setting Each Corner

CSS round borders apply to all four edges when you use the border-radius shorthand.

However, borders can be rounded separately with these rules:

Four values: 

The order of application – top-left, top-right, bottom-right, and bottom-left corner.

Three values:

The order of application – top-left (first value), top-right and bottom-left (second value), bottom-right (third value).

Two values:

The order of application – top-left and bottom-right (first value), top-right, and bottom-left (second value).

One value: rounds all corners equally:

This example sets two, three and four values by using the shorthand property:

Example
#roundc4 {
    border-radius: 20px 60px 40px 10px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc5 {
    border-radius: 20px 60px 40px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc6 {
    border-radius: 20px 60px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

Elliptical corners also can be created using CSS border-radius. Instead of leaving a space character between the values, you have to add a slash symbol (/) between two values.

In the example, we assign elliptical corners to three elements:

Example
#roundc7 {
    border-radius: 30px/20px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc8 {
    border-radius: 20px/60px;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px; 
}

#roundc9 {
    border-radius: 60%;
    background: #5E37BC;
    padding: 30px; 
    width: 250px;
    height: 200px;
}

CSS Rounded Corners: Useful Tips

  • If you notice any background-color leaks in the edges of the borders, add background-clip: padding-box;.
  • The prefixes of -webkit- and -moz- are no longer required. However, if you need to guarantee browser support, you can add them to border-radius.
  • You can specify rounded corners in CSS by using length indicators and percentages.