CSS border-radius

The border-radius property in CSS is used to add rounded corners to an element. It sets the four corners to the same or different radiuses depending on the number of values given. In other words, it sets the four longhand properties (border-top-left-radius, border-bottom-left-radius ...) separately or all equal.

border-radius: radiuses
border-radius: 5px;                  /* all corners, % of parent's width */
border-radius: 5px 10px 15px 20px;   /* corners: top-left top-right bottom-right bottom-left */
border-radius: 5px 10px 15px;        /* corners: top-left top-right&bottom-left bottom-right */
border-radius: 5px 10px;             /* corners: top-left&bottom-right top-right&bottom-left */
border-radius: 20px / 10px;          /* elliptical corners: 20px horizontal-radius, 10px vertical-radius */
border-radius: 10px 10px 20px 20px / 20px 20px 10px 10px;   /* horizontal-radiuses / vertical-radiuses */

Note the clockwise order starting with the top-left corner. Ignored radiuses are assigned the same as the opposite corner. border-radius doesn't need a border. It changes the background area to have rounded corners even with no border set.

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

An Example

border-radius is a shorthand. Use it to set the four radiuses at the same time. To override one, two or three corner radiuses while preserving the others, use longhand properties like border-top-left-radius.

div.container {
border-radius: 5px 10px 15px 20px; border: 5px solid orange;

The "Problem" with Percentages

Percentage border radiuses don't work in the way one expects at first. A single percentage value means horizontal radius is calculated against parent's width but the vertical radius is calculated agains parent's height. The result is that corners may not even look rounded in tall or wide containers. The only case when the corners are perfectly round are square containers.

div.container {
height: 100px; border-radius: 10%; border: 5px solid green;

CSS Ovals and Circles

border-radius is used to create pure CSS circles and ovals. It's done by setting a fixed size or proportion and setting border-radius to 50%. It works specially well on images because there's no need to fix their size, they already have fixed aspect ratios.

.rounded {
width: 80%; border: 5px solid #f0f0f0; border-radius: 50%; box-shadow: 3px 3px 2px gray;

Horizontal and Vertical Radius

When using border-radius, each corner can be thought of as being a section of an ellipse. Use a slash to set the vertical radius of each ellipse different from the horizontal radius. This enables more creative corners than simple rounded ones.

div.container {
border-radius: 30px 10px / 10px 30px; border: 5px solid gray;

The horizontal radius is 30px for top-left and bottom-right and 10px for top-right and bottom-left. The vertical radius is the other way around.

The Shape of the Content Area

border-radius sets the radius of the outer part of the border. If the border is thinner than the length of the radius (border-width < border-radius), the corners of the content (or padding) area are also rounded in order to maintain the border width. If the border is thicker, the content corners remain sharp.

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>