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.
Syntax
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- |
4.0
3.0 -moz- |
5.0
3.1 -webkit- |
9.0 | 10.5 |