Computer >> Computer tutorials >  >> Programming >> CSS

CSS3 Rounded corners


CSS3 Rounded corners are used to add a special colored corner to body or text by using the border-radius property.

A simple syntax of rounded corners is as follows −

#rcorners {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px;
   width: 200px;
   height: 150px;
}

The following table shows the possible values for Rounded corners as follows:

Values
Description
border-radius

Use this element for setting four border radius property
border-top-left-radius

Use this element for setting the border of top left corner
border-top-right-radius

Use this element for setting the border of top right corner
border-bottom-right-radius

Use this element for setting the border of bottom right corner
border-bottom-left-radius

Use this element for setting the border of the bottom left corner