[<length> | <percentage>] [<length> | <percentage>]

Applicable to...

All elements except table elements that have the property border-collapse:collapse;




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.


Firefox prefix

Border-radius has a special structure when using the -moz- prefix!


Chrome Firefox Internet Explorer Opera Safari
4.0+ 4.0+ 9.0+ 10.5+ 5.0+