Style borderRadius Property
Clash Royale CLAN TAG#URR8PPP
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Style borderRadius Property
❮ 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 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 |
Related Pages
CSS reference: border-radius property
❮ Style Object
