The border-radius property is used to set all four corners of a box in a single declaration.

Same as other border properties it may accept one, two, three or four values. If we assign only one value to it, than it will be applied to all corners, but if we assign more than one, it will behave in one of the following manner:

  • Two values (2). The first applies to the top-left and bottom-right corners, while the second applies to the top-right and bottom-left corners.
  • Three values (3). The first applies to the top-left corner, the second applies to the top-right and bottom-left corners and the third applies to bottom-right corner.
  • Four values (4). The values are applied to each corner in a clockwise direction starting from the top left.

The values for the horizontal and vertical radii are separated by a forward slash. However, you don't specify each pair separately, all horizontal values come before the slash, and all vertical values come after. And this is where the syntax becomes really complex - you don't need to use the same number of values before and after the slash. The syntax and example below show how.

Syntax:

selector {

   border-radius: value;

}

Values:

The following values are permitted for the border-radius property:

Example

Border-radius property and slash forward separation:

 

›› go to examples ››