CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 border-radius Property
Example
Add rounded borders to a div element:
div
{
border:2px solid;
border-radius:25px;
}
{
border:2px solid;
border-radius:25px;
}
Try it yourself »
Browser Support
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.
Definition and Usage
The border-radius property is a shorthand property for setting the four border-*-radius properties.
Tip: This property allows you to add rounded borders to elements!
| Default value: | 0 |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.borderRadius="5px" |
Syntax
border-radius: 1-4 length|% / 1-4 length|%;
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 | Play it |
|---|---|---|
| length | Defines the shape of the corners | Play it » |
| % | Defines the shape of the corners in % | Play it » |
Example 1
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;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Example 2
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;
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;
Related Pages
CSS3 tutorial: CSS3 Borders
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
