Rounded Corners in Internet Explorer: Staying Ahead of the Curve

Markus Mielke, Program Manager
Sharon Sears, Technical Writer

Microsoft Corporation

March 15, 2006

Summary: We show you five ways you can add rounded corners to your Web site by using CSS and HTML. Try these tips to make your Web site stand out with a dynamic new look.

Contents

Making the Case for Rounded Corners
Putting You in the Corners
Building Your Code
Finding What Works Best

Making the Case for Rounded Corners

So, you're staring at your Web site. It all looks very boxy, and you're thinking that it would be nice if you could add some rounded corners. Perhaps you're tired of waiting for the W3C to release the CSS3 Recommendations, which will include specifications for rounded corners, and—even better—several border properties. The good news is that you don't have to wait any longer. Currently, there isn't one optimal solution, so we tried out several different methods for adding dynamic and attractive rounded corners to your backgrounds for Web page content. The goal here is to give you a simple start towards building the next generation look-and-feel of the Web by using today's available standards.

As we have said, there are many approaches to the rounded corner dilemma, each of which has its pros and cons. Some of these solutions load quickly but run the risk of clipping your contents; others might load more slowly, but would provide a more flexible background for your contents.

We looked at solutions that use tables in HTML as well as solutions that use Cascading Style Sheets (CSS) and DIVs. After we explored several of these ideas, we concluded that the table solution really isn't bad when you do it correctly. You can make it dynamic, so that the table scales with your contents, and you can make it load pretty quickly. You should keep in mind, however, that a table layout in HTML can create problems with accessibility.

In the end, we want you to take this away:

• You don't have to wait for CSS3 to get rounded corners into your Web site.
• There are several rounded corner solutions out there, and each one has its pros and cons.

Putting You in the Corners

For the rounded corners presented in the sample code, you need a pair of two-corner GIFs like these.

       

Fig. 1 A pair of two-corner GIFs

Or a set of four single-corner GIFs like these.

             

Fig. 2 A set of four single-corner GIFs

You can certainly download and use the GIFs shown here, but keep in mind that when you download them, they won't have a transparent background, and they might not match your color scheme. So this means that you need to create some corner GIFs, which is a simple thing to do. Depending on what you need for your Web site, there are several ways in which you can create rounded corner GIFs.

• If your graphics application doesn't generate GIFs with transparent backgrounds, you can make your corners with the inside curve the same color as your content background, and the outside curve the same color as your page background. Use this type of color scheme when you are using solid background colors for both your page and your content.
• Better yet, if you don't have the time or the means to create any corner GIFs, you can download corner GIFs to use on a white background from http://www.nutrocker.co.uk/corners.html. This site has corner GIFs in every Web-safe color you'll ever need.

For your particular Web pages, you might need one part of your corner GIF to be transparent so that the background is visible. You need to create your corner GIFs in a graphics program that exports GIFs with a transparent background.

• If you want to use a graphic for your page background, make your corner GIFs so that the outside of the curve is transparent, and the inside matches your content background. That way, the graphic you use for the page background shows through the corners. With this color scheme, however, you need to set the background color for each table cell in your HTML, and you need to make sure there is not a background color for the four corner cells.
• If you plan to use several tables in your site, each with a different background color, make the corner GIFs so that the inside of the curve is transparent, and so that the outside matches your page background. Assuming you use the same corner radius for every content background and the same background color for every page, you only need to create one set of corner GIFs to use throughout your Web site.

Building Your Code

We have gathered five different sets of code for you to try. The first three use only HTML code and are actually variations of each other. The last two solutions use Cascading Style Sheets (CSS). Give them all a try and see which one works best for your Web site.

Basic Table Solution
Basic Table Variation
Optimal Table Solution
Fixed Width Boxes Solution
Nested DIV Elements Solution

Basic Table Solution

The HTML for the Basic Table solution is really quite simple and fairly effective. Note that we set the width attribute to 200 pixels; specifying a width for your table is great for instances where you don't want your table to scale with your screen, such as when you want to frame a graphic. With your graphic in the center cell of a nine-cell table layout, the surrounding cells with the rounded corner GIFs create a nice border. You can change the border's width based on the dimensions of your corner graphics. When you set up your table, derive the table width by adding the width of the center graphic to the widths of the corner GIFs.

<table width="200" cellpadding="0" cellspacing="0">
   <tr>
      <td width="20"><img src="TLOuterBlue.gif" alt=""></td>
      <td></td>
      <td width="20"><img src="TROuterBlue.gif" alt=""></td>
   </tr>
   <tr>
      <td> </td>
      <td>Content goes here</td>
      <td> </td>
   </tr>
   <tr>
      <td><img src="BLOuterBlue.gif" alt=""></td>
      <td></td>
      <td><img src="BROuterBlue.gif" alt=""></td>
   </tr>
</table>

Show Me

The Basic Table solution does have a couple of drawbacks. The main problem is with setting the width attribute in pixels; the table won't scale to fit the parent window if you want your content to remain completely visible at all times. Additionally, the challenge with using the Basic Table solution to border your graphics is that you need to change the width of the table every time you change the width of the graphics. If your Web site contains several graphics of varying widths, you need to change each table width individually.

This solution can also present a performance issue. Internet Explorer renders tables in HTML by using a multipass algorithm, even if the table and all of the columns have a set width. The tables are rendered this way in case one of the cells overflows its column width and forces the column to be wider. To learn more about table rendering, see Table Rendering in Dave Massy's Internet Explorer Weblog.

Basic Table Variation

By changing one small detail in the Basic Table solution, you can make it much more usable for framing graphics on your Web site. If you eliminate the table width completely, the table will resize to fit whatever graphic you drop into the center table cell. As we stated with the Basic Table solution, however, Internet Explorer uses a multipass algorithm to render tables, so your table might load more slowly. If your Web site is graphics-heavy, the decreased loading speed might affect overall performance.

<table cellpadding="0" cellspacing="0">
   <tr>
      <td width="20"><img src="TLOuterBlue.gif" alt=""></td>
      <td></td>
      <td width="20"><img src="TROuterBlue.gif" alt=""></td>
   </tr>
   <tr>
      <td> </td>
      <td>Content goes here</td>
      <td> </td>
   </tr>
   <tr>
      <td><img src="BLOuterBlue.gif" alt=""></td>
      <td></td>
      <td><img src="BROuterBlue.gif" alt=""></td>
   </tr>
</table>

Show Me

Optimal Table Solution

It doesn't take much to derive the Optimal Table solution from the Basic Table solution. First, we changed the table width from a set number of pixels to a percentage so that it will scale to fit the screen or frame. Secondly, we did not specify a width for the center column where the content goes. This way, the column will scale with whatever content we drop into it. The third step we took to optimize this solution was to set table-layout as "fixed". Okay, so it's not just HTML anymore, but adding this CSS property greatly increases the loading speed, and it enables the table contents to render progressively. Progressive rendering might be really important if your content is large or if your Web site contains a lot of graphics.

Note that this solution is most effective when you are using the table to border content other than graphics. You can use this solution to border graphics, but you might need to play with the table width percentage so that the border doesn't expand when you expand your window. By setting your table width percentage low enough, you can make it so that the table doesn't expand with the window width; however, if you set your table width percentage too low, your graphics might be unattractively clipped.

The only caveat for this solution: be careful to specify the correct column width for your corner images or they'll appear cropped.

<table width="100%" cellspacing=0 cellpadding=0 style="table-layout: fixed">
   <tr>
      <td width="20"><img src="roundCorners5.gif"></td>
      <td></td>
      <td width="20"><img src="roundCorners6.gif"></td>
   </tr>
   <tr>
      <td></td>
      <td>Content goes here</td>
      <td></td>
   </tr>
   <tr>
      <td width="20"><img src="roundCorners3.gif"></td>
      <td></td>
      <td width="20"><img src="roundCorners4.gif"></td>
   </tr>
</table>

Show Me

What Makes This Table Optimal

• Set your overall table width to 100%, add fixed widths for the side columns and don't set a width on the content column, and your layout expands to the window size in a very scalable way.
• Add the CSS property style="table-layout: fixed" to your <TABLE> tag to make your table load much faster, and to enable progressive content rendering—an important factor for loading large content or images.

Fixed Width Boxes Solution

Here is our first solution that uses a cascading style sheet. It's nice and simple, and it relies on only two GIFs instead of four for the corners. The main advantage to using this solution is that it will load very quickly since there are no tables to render, because the solution uses DIV elements to hold your content instead. Note the padding-bottom property in the "div.roundcorner" class. You can adjust the pixels value for this attribute to align your contents vertically within the border. If you simply want to center your contents vertically, delete the property.

The CSS

<style type="text/css">
   td { background-color: #FFFFFF;}
   td img { display: block;}

   div.roundcorner {
     width: 200px;
     background: #ffffff url(roundCorners1.gif) no-repeat bottom center;
     padding-bottom: 15px;
   }

   p.roundcorner {
     padding-top: 15px;
     background: transparent url(roundCorners2.gif) no-repeat top center;
     padding-left: 15px
   }
</style>

The HTML

<div class="roundcorner">
   <p class="roundcorner">Content goes here</p>
   <p> </p>
</div>

Show Me

This solution is, however, somewhat limited because the border uses two fixed-width images instead of four separate images for the corners. It is best used when you need only one width of rounded-corner border for the content backgrounds on your Web site, and you don't need your content to scale with the window.

Nested DIV Elements Solution

Our second CSS solution is for the CSS purist; it's very creative, and it relies entirely on nested DIV elements. It's actually quite a versatile solution, since CSS makes it easy to place it anywhere on your Web page and you can even overlap your rounded-corner areas. If you set the width property in the first DIV to a percentage, the DIVs scale to your window size. By specifying a set width for the DIV elements, you can use the DIVs to border images. Just be sure to insert your content inline between a <div> tag, or you will get a nasty break along the bottom of your graphic.

Best of all, the nested DIV elements solution doesn't rely on tables at all. This facet makes it easy to change your rounded corner backgrounds throughout your Web site. This fact also means that this solution can work much better for accessibility.

The CSS

<style type="text/css">
   td { background-color: #FFFFFF; }
   td img { display: block; }

   div.roundcorner2 {
      width: 200px;
      background: #ffffff url(TROuterBlue.gif) no-repeat top right;
   }
   div. roundcorner2 div {
      background: transparent url(TLOuterBlue.gif) no-repeat top left;
   }
   div. roundcorner2 div div {
      background: transparent url(BROuterBlue.gif) no-repeat bottom right;
   }
   div. roundcorner2 div div div {
      background: transparent url(BLOuterBlue.gif) no-repeat bottom left;
      padding: 15px;
   }

</style>

The HTML

<div class="roundcorner2">
   <div>
      <div>
         <div>Content goes here</div>
      </div>
   </div>
</div>

Show Me

The drawback to this solution is that the code can be difficult to read, and you can end up with convoluted HTML that's hard to maintain. The DIVs really have no reason to be in the code other than to provide insertion points for each corner, since you can't put all the images in one DIV.

Finding What Works Best

As you can see, there are many ways to approach adding rounded corners to your Web site. These are just a few; you can find many more by searching online for "rounded corners." Some of the approaches out there are simple and quick, and some rely on a much more complicated setup. You decide if you want something that loads quickly and involves a bit more coding, or if you want something that loads more slowly but is easier to code. We simply wanted to make it possible for you to start creating more exciting Web pages before CSS3 supports borders and rounded corners.

Here are some additional links to get you started.

• http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius
• http://css-discuss.incutio.com/?page=RoundedCorners