CSS3 border-radius Property

Here is a brief definition and the explanation on the usage of the Css3 Borders-Border radius property

Explanation

CSS3 Border-radius
The CSS3 border-radius Property helps you provide "rounded corners" for an element.

Property :

border-radius
The border-radius property is a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties. If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.

Four values: First value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner.
Three values: First value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right.
Two values: First value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner.
One value: All four corners are rounded equally.

Examples:


border-radius: 15px 50px 30px 5px
border-radius: 15px 50px 30px
border-radius: 15px 50px

Usage:


border-radius: 25px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;

Definition:

This property defines the shape of the border of the specified corner.

Example 1:


<div style="border-radius: 25px;border:2px solid red; width: 100px;height: 50px;background:red;"> </div>
Result:


Example 2:


<div style="border-top-left-radius: 25px;border-bottom-right-radius: 25px;border:2px solid red; width: 100px;height: 50px;background:red;"> </div>
Result:


Ask Questions

Ask Question