X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Style borderRadius Property

Style Object Reference Style Object

Example

Add rounded borders to a div element:

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

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!


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The borderRadius property is supported in IE9+, Firefox, Chrome, Safari, and Opera.


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


Related Pages

CSS reference: border-radius property


Style Object Reference Style Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook