ExampleAdd rounded borders to a div element:
Try it yourself » |
The border-radius property is supported in Opera, Chrome, and Safari.
Firefox supports an alternative, the -moz-border-radius property.
The border-radius property is a shorthand property for setting the four border-*-radius properties.
Tip: This property allow you to add rounded borders to elements!
Default value: | 0 |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object.style.borderRadius="5px" |
border-radius: 1-4 lengths|% / 1-4 lengths|%; |
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.
Value | Description |
---|---|
length | Defines the shape of the corners |
% | Defines the shape of the corners in % |
border-radius:2em; is equivalent to: border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; |
border-radius: 2em 1em 4em / 0.5em 3em; is equivalent to: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; |