CSS Rounded Corners

The CSS border-radius property is used to sets the rounded shape for the border corners of an element.

This property is a shorthand property for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius property.

CSS border-radius Property

This property allows you to add rounded corners to elements either background-color is set to that element, the border is set or background-image set.

Example:

#image1 {

border-radius: 20px;

background: #ff5722;

padding: 15px;

width: 100px;

height: 60px;

}

#image2 {

border-radius: 20px;

border: 2px solid #ff5722;

padding: 15px;

width: 100px;

height: 60px;

}

#image3 {

border-radius: 20px;

background: url(sample.jpg);

background-position: left top;

background-repeat: repeat;

padding: 15px;

width: 100px;

height: 60px;

}

The border-radius property includes one, two, three or four values.

One value: border-radius: 20px;

It is used to set border radius 20px of each corners. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-botton-left-radius, border-bottom-right-radius. It sets all corner to the same value.

Example:

#rounded-corner {

border-radius: 20px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

Two values: border-radius: 20px 35px;

This property is used to set the first value 20px as top-left and bottom-right corner and second value 35px as top right and bottom left corners.

Example:

#rounded-corner {

border-radius: 20px 35px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

Three values: border-radius: 20px 35px 25px;

This property is used to set first value 20px to top-left corner, second value 35px applied to top-right and bottom left corners and third value 25px applied to bottom right corner.

Example:

#rounded-corner {

border-radius: 20px 35px 25px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

Four values: border-radius: 20px 35px 25px 15px;

This property is used to set first, second, third and fourth value of border radius to top-left, top-right, bottom-right and bottom-left corners respectively.

Example:

#rounded-corner {

border-radius: 20px 35px 25px 15px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

border-top-left-radius

This property is used to set the value to the top-left corner.

Example:

#rounded-corner {

border-top-left-radius: 40px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

border-top-right-radius

This property is used to set the value to the top-right corner.

Example:

#rounded-corner {

border-top-right-radius: 40px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

border-bottom-left-radius

This property is used to set the value to the bottom-left corner.

Example:

#rounded-corner {

border-bottom-left-radius: 40px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

border-bottom-right-radius

This property is used to set the value to the bottom-right corner.

Example:

#rounded-corner {

border-bottom-right-radius: 40px;

background: #ff5722;

padding: 10px;

width: 100px;

height: 80px;

}

To use border radius of 50% on square corner to create a circle.

Example:

#rounded-corner {

border-radius: 50%;

background: #ff5722;

padding: 20px;

width: 200px;

height: 200px;

}

You Are Here

CSS Rounded Corners

CSS border-radius Property

Example:

One value: border-radius: 20px;

Example:

Two values: border-radius: 20px 35px;

Example:

Three values: border-radius: 20px 35px 25px;

Example:

Four values: border-radius: 20px 35px 25px 15px;

Example:

border-top-left-radius

Example:

border-top-right-radius

Example:

border-bottom-left-radius

Example:

border-bottom-right-radius

Example:

Example:

Ask a Question Cancel reply