- Description
Border-radius is a shorthand property for the four properties border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
If the value contains a slash the value before the slash sets the horizontal radius and after the slash sets the vertical radius.
Without a slash both Horizontal and vertical radii are equal.
Webkit and gecko based browsers currently support border-radius via proprietary properties as shown in the example below.See also:
- Border
- Border-style
- Border-color
- Border-width
- Live Example
- Play with the code in the textarea below.
- Values
- [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
- Introduced in CSS version
- 3
- Applies to elements
- All
- Inherited
- Yes
- Browser Support
Browsers IE Firefox Safari Opera Chrome Versions 9 4 -webkit- 10.50 -webkit-
Belongs to:
See the full list CSS properties and browser support: CSS Properties