Поделиться через

How to Add Rounded Corners with CSS3

  • Статья

By using Cascading Style Sheets, Level 3 (CSS3) to round the corners of layout elements, you can refine the appearance of your website. This topic demonstrates a few basic ways to make your website layout more compelling by using the new built-in support for rounded corners in Windows Internet Explorer 9. It contains the following sections:

  • A Starting Point
  • Rounding All Corners Equally
  • Rounding Multiple Corners Separately
  • Rounding Corners with Ellipses
  • Rounding Corners with Other Browsers
  • Putting It All Together
  • Rounding Corners with Older Versions of Internet Explorer
  • Related topics

A Starting Point

For the tasks described in this topic, we start off with a very basic webpage. This page is for a fictional coffee company and includes some HTML, some Cascading Style Sheets (CSS), and a few images. You can view and download the HTML, and the CSS. The following screenshot shows the initial webpage.

Important  

When you create your own webpages to take advantage of the new web standards support introduced in Internet Explorer 9, be sure to include the following !DOCTYPE directive at the top of your page:

<!DOCTYPE html>

This ensures that Internet Explorer 9 renders your page in "Internet Explorer 9 Standards mode" using the latest standards support. For more information, see Defining Document Compatibility.

 

In this layout, as in many others, the boxes help to visually separate content, as well as to provide visual interest. Still, this layout is fairly flat. With Internet Explorer 9 and CSS3, however, you can round the corners of those boxes.

Rounded corners in Internet Explorer 9 with CSS3 are very robust, and there are many possible combinations. In this topic, we focus on three areas of the sample layout, as highlighted in the following image:

  • The border of the coffee bean thumbnail images (defined by the product_thumb class selector)
  • The sidebar along the right side of the page (defined by the sidebar ID selector)
  • The yellow header bands along the top and bottom of the page (defined by the header and footer ID selectors)

Rounding All Corners Equally

We start with the coffee bean thumbnails, and give them slightly smoother corners. To round all the corners of a box equally, use the border-radius property with one value. (The value can be either a length value or a percentage; percentages are based on the total height or width. All the examples in this topic use length values.) To use this property in its simplest form, you specify the radius of the circle that defines the shape of each corner of the box. In the following image, a border-radius of 20 pixels has been applied to the rectangle. Note how the circles define the curve of the corners.

Currently, the CSS that defines the thumbnails' appearance is the following class selector:

.product_thumb {
  clear: left;
  height: 80px;
  width: 80px;
  margin-right: 10px;
  padding: 5px;
  float: left;
  border-width: 1px;
  border-color: #7f7f7f;
  border-style: dashed;
}

This makes each thumbnail appear as follows in Internet Explorer 9:

Let's add the border-radius property and assign it a value of 5 pixels. We do this by adding the following line to the product_thumb class selector:

  border-radius: 5px;

After adding this line to the selector, the coffee bean borders all appear as shown here:

Rounding Multiple Corners Separately

Now let's turn our attention to the sidebar. Currently, the CSS that defines the sidebar's appearance is the following ID selector:

#sidebar {
  font-size: 12px;
  padding: 15px;
  margin: 20px 0px 10px 75%;
  border-style: dashed;
  border-color: #996600;
  border-width: 5px;
}

This makes the sidebar appear as follows in Internet Explorer 9:

We can round the upper-left corner with a wider curve than the rest of the corners by using one of two methods. The first involves using one of the other border-radius properties.

The border-radius properties are the following:

We can use some of these properties to fill in the white space at the upper-left corner of the sidebar, plus add some interesting curves to the lower part of the sidebar.

Let's add the following lines to the sidebar ID selector:

  border-top-left-radius: 10em;
  border-bottom-right-radius: 5em;
  border-bottom-left-radius: 2em;

After adding these lines to the selector, the sidebar appears as shown here:

You can also round the corners of the sidebar separately by using the border-radius property as a shorthand property. If you enter more than one value for the border-radius property, the curve of each corner varies depending on the order of the values. For instance, the same result can be achieved in the sidebar example by adding the following line to the selector:

  border-radius: 10em 0 5em 2em;

The order of values within the border-radius property is as follows:

  border-radius: ul ur lr ll;

Here, ul represents the upper-left corner, ur represents the upper-right corner, lr represents the lower-right corner, and ll represents the lower-left corner. A zero length value for any of these values means no curve is produced; the corner remains a right angle. The order of values is illustrated in the following image.

For different results, we could also use just two values, or even three values with the border-radius property. Give it a try for yourself. For a detailed explanation of the behavior of this property, see the border-radius property reference page on MSDN.

Rounding Corners with Ellipses

So far, we have worked only with rounded corners defined by circles. The border-radius properties can also create corners defined by ellipses, with different x (horizontal) and y (vertical) radii.

Let's round the top two corners of the box defined by the header ID selector, plus the bottom two corners of the box defined by the footer ID selector using two ellipses.

We want to use ellipses to define the upper-left and upper-right corners of the header, so add the following two lines to the header selector:

  border-top-left-radius: 50px 25px;
  border-top-right-radius: 50px 25px;

To use ellipses to define the lower-left and lower-right corners of the footer, add the following two lines to the footer selector:

  border-bottom-left-radius: 15px 30px;
  border-bottom-right-radius: 15px 30px;

For all the individual border-radius properties, the first value equals the horizontal radius of the ellipsis that defines the corner, and the second value equals the vertical radius. This is shown in the following figure:

You can also use the border-radius property as a shorthand, to define elliptical rounded corners all in one line. The order of values within the border-radius property is as follows:

border-radius: ulx urx lrx llx / uly ury lry lly;

The values before the slash ('/') define the horizontal (or x-) axes of each corner, and the values after the slash define the vertical (or y-) axes. Here, ulx represents the upper-left corner's horizontal axis, urx represents the upper-right corner's horizontal axis, and so on. Also, uly represents the upper-left corner's vertical axis, ury represents the upper-right corner's vertical axis, and so on. The order of values is illustrated in the following image.

The following line added to the header ID selector produces the same results as we saw previously:

border-radius: 50px 50px 0 0 / 25px 25px 0 0;

Similarly, the following line added to the footer ID selector produces the same results as before:

border-radius: 0 0 15px 15px / 0 0 30px 30px;

Rounding Corners with Other Browsers

Because CSS3 is still an emerging standard, at this writing not all browsers support the border-radius properties equally. Some older versions of browsers support the border-radius properties, but only with their corresponding vendor-specific prefix at the beginning. (To learn more about vendor-specific prefixes, see "Microsoft CSS Vendor Extensions" on the Windows Internet Explorer Team Blog.) Others have varying support for the slash ('/') notation explained previously, and some have limited support for elliptical (as opposed to circular) borders.

To ensure backward compatibility with an older version of a browser, you should consult the corresponding browser vendor's website. Depending on the browser and the version, you might be able to simply duplicate any border-radius properties with the corresponding vendor-specific prefix. For instance, the following selector should produce the same rounded corner results in Internet Explorer 9 as in current and older versions of Mozilla Firefox, Apple Safari, Google Chrome, and Opera:

.my_selector {
  ...
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

The more complex your rounded corners, however, the less likelihood the border-radius syntax will be transferable. In that case, you should consult the browser vendor's website:

Putting It All Together

See the new look of the Fourth Coffee page after all the changes described in this topic (and with vendor-specific property names for other browsers added) here: HTML for updated page; CSS for updated page.

Rounding Corners with Older Versions of Internet Explorer

Support for the border-radius properties is new in Internet Explorer 9. To add rounded corners to your layout so users of Windows Internet Explorer 8 and earlier can view them, you can take advantage of one of the abundance of alternate solutions available on the web. In addition to individual rounded corners solutions, there are also sites with frequently updated lists of rounded corners solutions that are compatible with multiple versions of Internet Explorer and other browsers.

Listed here are a few of our favorite sites for aggregated rounded corners solutions. (The inclusion of any link does not imply endorsement by Microsoft of the linked site.)

Contoso Images photo gallery

How to Create Stylish Buttons with CSS3

How to Add Drop Shadows with CSS3

CSS3