It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

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 Oct 2, 2019

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

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.