O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

border-radius

Values:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4}

Initial value:

0

Applies to:

All elements except table elements where border-collapse is collapse

Inherited:

No

Percentages:

Refer to the dimensions of the element’s border box (see description)

Computed value:

Same as declared value

Description:

A shorthand property that defines the rounding radius for the bottom-right corner of an element’s border. The actual corners will be the height and width declared. For example, suppose the following:

.callout {border-radius: 10px;}

Each corner of an element with a class of callout will have a rounding that is 10 pixels across, as measured from the beginning of the rounding to the outer side edge of the element, and similarly 10 pixels high. This can be visualized as if the element has 10-pixel-radius (20-pixel-diameter) circles drawn in its corners and the border then bent along the circles’ edges.

Note that, given the way the syntax is defined, if two values are supplied, the first applies to the top-left and bottom-right corners, and the second to the top-right and bottom-left corners. To create oval-shaped rounding by supplying one value for the horizontal radius of each corner and a second value for the vertical radii, separate them with a slash:

.callout {border-radius: 10px / 20px;}

That will cause each of the four corners’ rounding to be 10 pixels across and 20 pixels tall. This extends out to setting the four corners uniquely, like so:

.callout {border-radius: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required