Border Radius

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.

Found a bug in the documentation? Let us know at documentation@code.org