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

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:

• An element with a background color.
• An element with a border.
• An element with a background image.

#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:

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:

#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:

#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.