Style borderRadiusProperty
Style ObjectExamples
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 borders to elements!
Browser Support
IE9+, Firefox, Chrome, Safari, and Opera support the borderRadius property.
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 the radius are given in the order top-left, top-right, bottom-right, bottom-left. If the bottom-left value is omitted, it is the same as the top-right. If the bottom-right value is omitted, it is the same as the top-left. If the top-right value is omitted, it is the same as the 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. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | 0 |
|---|---|
| Return value: | A string, representing the element's border-radius property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:border-radius property
Other Extensions