Style borderRadius Property

❮ Previous ❮ Style Object Reference Next ❯

Example

Add rounded borders to a div element:

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

Try it Yourself »

Description

The borderRadius property is a shorthand property for setting, or returning, the four borderRadius properties.

The four border radius properties are (in this order):

borderTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius

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

Browser Support

Property
borderRadius	Yes	9.0	Yes	Yes	Yes

Syntax

Return the borderRadius property:

object.style.borderRadius

Set the borderRadius property:

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

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.

Property Values

Value	Description
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

Technical Details

Default Value:	0
Return Value:	A String, representing the border-radius property of an element
CSS Version	CSS3

CSS reference: border-radius property