Style borderRadius Property

Definition and Usage

borderRadius This shorthand property is used to set or return the four borderRadius properties.

The four borderRadius properties are (in this order):

Tip:This property allows you to add rounded corners to elements!

See Also:

CSS Reference Manual:border-radius Property

Example

Add Rounded Borders to div Element:

document.getElementById("myDIV").style.borderRadius = "25px";

Try It Yourself

Syntax

Return borderRadius Property:

object.style.borderRadius

Set borderRadius Property:

object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"

Note:The four values of each radius are given in order of top-left, top-right, bottom-right, and bottom-left. If the bottom-left corner is omitted, it is the same as the top-right corner. If the bottom-right corner is omitted, it is the same as the top-left corner. If the top-right corner is omitted, it is the same as the top-left corner.

Property Value

Value Description
length Define the shape of the angle. The default value is 0.
% Define the shape of the corner in percentages.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical Details

Default Value: 0
Return Value: A string that represents the element's border-radius Property.
CSS Version: CSS3

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supported 9.0 Supported Supported Supported