Skip to main content

CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".

CSS border-radius Property​

The CSS border-radius property defines the radius of an element's corners.

Example

#rcorners {  
    border-radius:  25px;  
    border:  2px solid #73AD21;  
    padding:  20px;  
    width:  200px;  
    height:  150px;  
}

Example border radius

note

The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

PropertyDescription
border-radiusA shorthand property for setting all the four border---radius properties
border-top-left-radiusDefines the shape of the border of the top-left corner
border-top-right-radiusDefines the shape of the border of the top-right corner
border-bottom-right-radiusDefines the shape of the border of the bottom-right corner
border-bottom-left-radiusDefines the shape of the border of the bottom-left corner

CSS border-radius - Specify Each Corner​

The border-radius property can have from one to four values.

#rcorners {  
    border-radius:  15px 50px 30px 5px;  
    background:  #73AD21;  
    padding:  20px;  
    width:  200px;  
    height:  150px;  
}

One value​

border-radius: 15px; where the value applies to all four corners, which are rounded equally

Example border radius one value

Two values​

border-radius: 15px 50px; where first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners

Example border radius two values

Three values​

border-radius: 15px 50px 30px; where first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner

Example border radius three values

Four values​

border-radius: 15px 50px 30px 5px; where first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner:

Example border radius four value

Table of Contents