border-radius
Values
[<length> | <percentage>] [<length> | <percentage>]
Applicable to...
All elements except table elements that have the property border-collapse:collapse;
Inherited
No
Description
Border-radius is a shorthand property that defines the rounding radius for all corners of an element.
For example if you use border-radius: 5px; you can imagine that we take 4 circles with a radius of 5px, put them in every corner and draw the new border around them. If you want to use two values to create ovals you have to separate the two values with a slash. If you use two radius values (instead of 4) for the corners of an element the first value you define will be the top left and the bottom right corner and the second value the top right corner and the bottom left corner. This property has extra variants for all corners.
Examples
Firefox prefix
Border-radius has a special structure when using the -moz- prefix!
Compatibility
| Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|
| 4.0+ | 4.0+ | 9.0+ | 10.5+ | 5.0+ |
