CSS border-radius Longhand Properties

The CSS border-radius longhand properties set the radius for one rounded corner of an element. Use them to add or modify the radius of one corner at a time. The border-radius property sets the radiuses of the four corners at the same time.

%pxptemvw...%pxptemvw...
border-*-radius: radius vertical-radius?
border-top-left-radius: 10px;            /* circular rounded corner */
border-bottom-right-radius: 20px 10px;   /* elliptical corner: 20px horizontal, 10px vertical radius */

Two values create elliptical corners, with the second value being the vertical radius. When a single value is provided, the horizontal and vertical radii are set equal, resulting in a circular rounded corner.

Browser Support: Supported by all modern browsers. No support by IE8 and below. Vendor prefixes are not necessary.

Usage

The border radius longhands are necessary when overriding one of the radius lengths while preserving the other three. The border-radius property is better when setting all four radiuses because it saves a couple of lines.

div.container {
border-radius: 10px; border-top-right-radius: 30px 10px; border-bottom-left-radius: 30px;
}

Note the ellipse shape of the top right corner, in contrast with the three circular corners.

Percentage Radii

A percentage border radius doesn't work in the way one might expect. A border radius of 10% means that horizontal radius is 10% of parent's width but the vertical radius is 10% of parent's height. It all results in elliptical instead of circular rounded corners for wide containers.

div.example {
height: 100px; border-top-right-radius: 10%; border: 5px solid #4585F3;
}

Content Radius

The border-radius properties affect the shape of the content area when the radius is shorter than the border width. This is because border-radius sets the radius of the outer part of the border. If the border is too narrow, CSS rounds the corners of the content area to keep the border width uniform. This is specially noticeable when the element has no border: the radius is applied to the content (or padding if present). A "content radius" affects the background area and contents of the element, which are clipped as expected.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>