CSS border-radius Property

The border-radius CSS property is used to round the corners of an element's outer border edges. This property can have a value of one, two, three, or four. To set the border-radius, use the border-radius property. When border-collapse is collapsing, this property does not apply to table elements.

The four radius values can be specified in the order top-left, top-right, bottom-right, bottom-left. When the bottom-left is removed, it becomes the same as the top-right. Similarly, removing the bottom-right and top-right will result in the same as removing the top-left and top-left.




Property Values

Value Description
length The shape of the corners is defined by this property. The default value is zero. Learn more about length units.
% Defines the corner shape in percentage.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Element Chrome Firefox Safari Edge / IE Opera
border-radius 5.0 
4.0 -webkit-
3.0 -moz-
3.1 -webkit-
9.0 10.5