How to create CSS3 rounded corner elements for IE

We all know that the rounded corners are a common element of web designs however the difficult is to express it in clean CSS / HTML. As far as the long term solution is concerned, it is obviously the CSS3′s border-radius property. It is very well and nicely supported in the current versions of Safari and Firefox but the bad part is that the property is not supported in IE and not even the upcoming IE8.

These days everyone prefers to have the new design for their website full of rounded corners. One could not bear the idea of sending millions of little corner images when border-radius can do the trick so well. Looking at the trend of the usage of web browser, IE7 is the dominant of all of them thereby the users of this category cannot be ignored.

Let us look at some of the techniques that would meet these requirements:

• CSS3 border-radius aware browsers are sent clean, fast CSS with no corner images at all
• IE7+ gets a fallback making use of corner images
• The same HTML is used for all browsers - only the CSS is different
• There won’t be any issues with the cosmetics in IE6 and is OK to have square corners in this old browser
• No Javascriptis involved.

A much more and in-depth way to achieve this needs to be sorted out.

The main drawbacks and limitations are:

• It is known to incorporate some non-semantic empty divs to the markup.
• It needs a route or process so as to deliver different CSS to IE.
• Rounded elements cannot be supported with a border that is known to sit on top of unpredictable backgrounds.

Let’s implement it practically

The very first step that needs to be performed is to pick a unique style id for the rounded corners and this id will be made use of in order to find the right corner images for IE. Hence, this needs to be unique taking into the block’s background color, border style, and background the block is sitting on top of.

The following elements need to use wherever we want to have a rounded block:

Listing 1: Displaying the elements required for a rounded block

<div class="rounded_STYLE rounded">
  <div class="tl"></div><div class="tr"></div>
  ... contents of the block go here ...
  <div class="bl"></div><div class="br"></div>
</div>

As far as the STYLE is concerned, it should be the unique style ID. The empty tl and tr divs are the top left and right corners whereas the bl and br are the bottom right. Those divs are not used at all in a CSS3-aware browser however they are required for IE’s image corners.

For browsers like Safari and Firefox that are CSS3 aware, the elements can be styled as follows:

Listing 2: Code displaying the styling of the elements

.rounded_STYLE
{
    background-color: COLOR;          /* if needed */
    border: 1px solid BORDER_COLOR;   /* if needed */
    -webkit-border-radius: RADIUS;    /* for Safari */
    -moz-border-radius: RADIUS;       /* for Firefox */
}

With the RADIUS something like 4px, one is done in Firefox and Safari.

A look at the code in Internet Explorer

How beautiful it would have been if the tutorial would have just covered the Firefox or Safari part and there would not be any Internet Explorer .However the unfortunate part is the Internet Explorer is the browser that is used by the majority of the internet users. Talking about IE6, it has reduced to the point where there isn’t any need to worry on the pixel perfection. This opens the door for a decent solution in IE7 and above.

One needs to hide the CSS for .rounded_STYLE above from Internet Explorer and feed it the below listed code.

Listing 3: Code displaying the border color

.rounded_STYLE
{
  background-color: COLOR;            /* if needed */
  border: 1px solid BORDER_COLOR;     /* if needed */
  position: relative;
}

.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br
{
  width: RADIUS;
  height: RADIUS;
  position: absolute;
}

.rounded_STYLE > .tl
{
  background: url(/images/ui/rounded/STYLE-tl.png) top left no-repeat;
  top: OFFSET;
  left: OFFSET;
}

.rounded_STYLE > .tr
{
  background: url(/images/ui/rounded/STYLE-tr.png) top right no-repeat;
  top: OFFSET;
  right: OFFSET;
}

.rounded_STYLE > .bl
{
  background: url(/images/ui/rounded/STYLE-bl.png) bottom left no-repeat;
  bottom: OFFSET;
  left: OFFSET;
}

.rounded_STYLE > .br
{
  background: url(/images/ui/rounded/STYLE-br.png) bottom right no-repeat;
  bottom: OFFSET;
  right: OFFSET;
}

Again it can be noticed that RADIUS is again something like 4px and STYLE is the unique corner style id you chose. OFFSET should be set to -1px in case if you have a 1 pixel border for the element. It will be 0 in case there is no border.

Making the Corner Images

One could easily generate these images making use of PhotoShop or it could also be done with any other image editor. Talking about the Mac, we have a much easier way for the people with less or no PhotoShop experience; they can make use of the Preview application.

• You would be required to display the page in Firefox and then take a screenshot of one of the corners.
• Then you need to open the screenshot in Preview. Zoom in so as to see the pixels clearly.
• Its time now to select a square that is no bigger than RADIUS on a side. Also this needs to be aligned with the straight borders of the element.
• Now Copy and New from Clipboard.
• You need to then save this corner in your /images/ui/rounded directory making use of the name STYLE-CORNER.png where CORNER is tl, tr, bl, or br that depends on whatever corner you chose.
• Make use of Flip Horizontal and Flip Vertical so as to generate the other three corners and repeat.

So here we are, we can now see the attractive rounded corners in all modern browsers. Obviously, the Firefox and Safari users can enjoy faster browsing without millions of teeny corner images clogging up the internet and in addition, one has the satisfaction of being future-compliant with CSS3 for the reason of it being increasingly available.

Figure 1: Sample Output with the rounded corners

Conclusion

The tutorial focused on the process to come up with the creation of rounded corners in several elements of a web design with majority of the focus on Internet Explorer browser.