Style borderRadius Property
Add rounded borders to a div element:
Try it yourself »
Definition and Usage
The borderRadius property is a shorthand property for setting, or returning, the four border*Radius properties.
Tip: This property allows you to add rounded corners to elements!
The borderRadius property is supported in IE9+, Firefox, Chrome, Safari, and Opera.
Return the borderRadius property:
Set the borderRadius property:
Note: The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
|length||Defines the shape of the corners. Default value is 0|
|%||Defines the shape of the corners in %|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
|Return Value:||A String, representing the border-radius property of an element|
CSS reference: border-radius property