Css3 Tutorial


What are CSS3 Rounded Corners?

CSS3 Rounded corners are used for adding special colored corners to body or text by using the border-radius property.

A sample syntax for rounded corners is displayed below −
The below table displays the most possible values for Rounded corners as below −
Values
Description
border-radius
Use this element for setting four boarder radius property
border-top-left-radius
Use this element for setting the boarder of top left corner
border-top-right-radius
Use this element for setting the boarder of top right corner
border-bottom-right-radius
Use this element for setting the boarder of bottom right corner
border-bottom-left-radius
Use this element for setting the boarder of bottom left corner
Example
This property can take three values. The below example uses both the values −

What is CSS3 Each Corner property?

We can specify the each corner property as shown below example

It will produce the following result −
CSS3 Rounded Corners Output
List of Topics