Border Radius
Category:CSS Properties
Border Radius
The border-radius property specifies the radius of the element's corners; it allows you to add rounded corners to elements. This property can have from one to four values. The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. When one value is specified, it applies the same radius to all four corners.
Examples
Rounded Corners in Pixels
Set rounded corners in pixels for a <h1> element.
h1 {
border: 2px solid red;
border-radius: 25px;
}
Rounded Corners as a Percentage
Set rounded corners in percent for a <h1> element.
h1 {
border: 2px solid red;
border-radius: 20%;
}
Syntax
border-radius: value;
Tips
- You can give any element "rounded corners" by applying a
border-radius. - The default value is 0.
- The shape of the corners can be defined in pixels or percent.
Additional Information
For more information, see http://www.w3schools.com/cssref/css3_pr_border-radius.asp.
Found a bug in the documentation? Let us know at support@code.org.
