Simple CSS3 rounded corners with support for IE

Rounded corners are a common element of web designs. Unfortunately, they have been frustratingly difficult to express in clean CSS / HTML. The long term solution is CSS3′s border-radius property, which is nicely supported in the current versions of Safari and Firefox. Sadly but unsurprisingly, this property is not supported in IE, even the upcoming IE8.

The new design for our website was full of rounded corners. As an avid Firefox user, I simply could not bear the idea of sending millions of little corner images when border-radius did the trick so well. Yet, IE7 is the dominant browser, so we couldn’t leave those users out in the cold.

I started looking for a technique that would meet these requirements:

  • CSS3 border-radius aware browsers are sent clean, fast CSS with no corner images
  • IE7+ gets a fallback using corner images
  • The same HTML is used for all browsers – only the CSS is different
  • Cosmetics in IE6 don’t matter – it’s OK to have square corners in this old browser
  • No Javascript

Fortunately, I did find a flexible way to achieve this without too many problems. If you look at the BestInClass.com home page in Firefox, all of the corners and rounded buttons are implemented with pure CSS3.

The main drawbacks and restrictions are:

  • It adds some non-semantic empty divs to the markup.
  • It requires a way to deliver different CSS to IE.
  • It cannot support rounded elements with a border that sit on top of unpredictable backgrounds.

Show Me, Don’t Tell Me

For those that want to skip over the why and get straight to the how, here’s a fairly minimal example in a single file.

CSS3 Rounded Corners With IE Fallback Example

The Code for Decent Browsers

The first thing to do is pick a unique style id for the rounded corners. This id will be used to find the right corner images for IE, so it needs to be unique considering the rounded block’s background color, border style, and background the block is sitting on top of.

First, the HTML. Wherever we want to have a rounded block, use the following elements:

<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>

STYLE should be the unique style ID you chose. The empty tl and tr divs are the top left and right corners, while the bl and br are the bottom right. Those divs are not used at all in a CSS3-aware browser, but they are needed for IE’s image corners.

For a CSS3 aware browser like Safari and Firefox 3, this element can be styled very simply:

.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 */
}

RADIUS would be something like 4px. And that’s it, you’re done in Firefox and Safari.

The Code for IE

Life would be good if we could stop there, but unfortunately the depressingly incomplete and non-standard IE remains the favorite of a majority of users… At least usage of IE6 has dwindled to the point where we no longer have to worry about pixel perfection there. And that opens the door for a decent solution in IE7 and above.

Did I mention that the HTML is the same? Yes I did. But we do need different CSS. Somehow, you need to hide the CSS for .rounded_STYLE above from IE, and feed it the following instead. On BestInClass.com we use dynamically generated CSS to do this, but you could use IE conditional comments as well.

.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;
}

Here RADIUS is again something like 4px and STYLE is the unique corner style id you chose. OFFSET should be set to -1px if you have a 1 pixel border for the element, or 0 if there is no border.

The CSS references four different corner images. In this example, they are located on the path /images/ui/rounded.

Making the Corner Images

You could generate these images using PhotoShop or another image editor. At least on a Mac, there is a much easier way for the non-PhotoShop savvy using the Preview application.

  1. Display your page in Firefox and take a screenshot of one of the corners.
  2. Open the screenshot in Preview. Zoom in so that you can see the pixels clearly.
  3. Select a square that is no bigger than RADIUS on a side and which is aligned with the straight borders of the element.
  4. Copy and New from Clipboard.
  5. Save this corner in your /images/ui/rounded directory using the name STYLE-CORNER.png where CORNER is tl, tr, bl, or br depending on whatever corner you chose.
  6. Use Flip Horizontal and Flip Vertical to generate the other three corners and repeat.

Congratulations, you should now have attractive anti-aliased rounded corners in all modern browsers, with Firefox and Safari users able to enjoy faster browsing without millions of teeny corner images clogging up the internets. Plus, you have the satisfaction of being future-compliant with CSS3 as it becomes increasingly available.

Update 3/10/2009: Note that if you make your corner images for IE some other way than the suggested screenshot method above, that the background should not be transparent. Otherwise the square border that IE places down will not be erased properly. Also, all of the images should be the same square size.

43 Responses to “Simple CSS3 rounded corners with support for IE”

  1. HD on

    Created a site for a friend and hate the square corners, so have been looking for an easy rounded corner fix, but am not that familiar with this coding. Where in the index page does your html code go and where in the style sheet does the CSS3 coding go? Thanks–

  2. Bill Lipa on

    @HD – I’ve added an example that should make it more clear.

  3. links for 2008-09-21 | pollas.dk [permanent meta] » Blog Archive on

    [...] BestInClass.com Blog » Simple rounded corners with CSS3 box-radius and fallback for IE The long term solution is CSS3’s box-radius property, which is nicely supported in the current versions of Safari and Firefox. Sadly but unsurprisingly, this property is not supported in IE, even the upcoming IE8. (tags: tutorial corners webdev css css3) [...]

  4. HD on

    Thanks so much for your help! This fix is really great and works perfectly in Foxfire!! In IE7 though, while the top corners are now rounded, the bottom corners are still square. Scrolling down you can see that the rounded corners are way below the frame, at the very bottom of the page. Is there anything that can be done to fix that?

  5. Bill Lipa on

    @HD – looking at your site, you have two declarations of the rounded_colhead div. The second one is beneath the footer and contains the bl and br divs. That’s why the bottom corners are going down there in IE. What you want to do is get rid of the second rounded_colhead div and move the bl and br divs to the end of the first rounded_colhead div (like in the example).

  6. HD on

    Initially, I had the code in the same place as the example, but I just ended up with a separate rectangle, with rounded corners, above my frame. I had to play around with it to get the corners to go where they were supposed to, and discovered that moving the bl and br code to the bottom was the only way it worked for me in Foxfire.

    I could see a problem in IE7 with the actual corners that I had made, so I just created new ones. Foxfire is still fine and, in IE7, now the rounded corners that were floating at the bottom have disappeared, while the corners at the top are now stepped. Not sure why that happened but if it stays that way, I can live with it. (For some reason, it looks different on my computer than it does online, even though I have all of the same files here –the corners are still just squared in IE7.)

  7. OZZIE on

    HD the browser is called FireFox ___not___ foxfire lol.. so please stop saying it :)

  8. freelancer on

    IMO using rounded corner image is better than using css (moz-border, etc). That is because rounded corners are rendered ugly: no anti-aliasing, at least in FF, corners does not look the same (in my case left corner is more rounded than right, even though i gave the same rounding value). Images are much more flexible, reliable, and cross-browser compatible.

  9. Bill Lipa on

    The rounded corners are rendered nicely in the prevalent versions of Firefox and Safari. Firefox 2 had rather ugly jagged round corners, but that’s a pretty small percentage of users now. You can use the same image fallback technique to handle Firefox 2 users if you’re still concerned about them.

    I haven’t seen a problem with different looking corners – what browser is that on?

  10. The new features of CSS3 | Goowik DesigN on

    [...] If by any chance you do want to start using the rounded function feature, but would like to have the same effect on other browsers that doesn’t support it, go here. [...]

  11. vicky pandey on

    dose it work in IE 6.0 and 8 beta, coz it is not working in that browser

  12. Bill Lipa on

    This technique does not work in IE6. It could probably be made to work with some effort, but our policy for IE6 is not to sweat the cosmetic details. IE6′s user base is declining, and it’s a painful browser to support.

    I’ll have to look at it in IE8. It should be easy to make it work if there’s something the matter there.

  13. César Camelo on

    Hi Bill !! Very nice article.

    I could see a problem when my menu drops down over my rounded corner box, works fine for Firefox, Safari and Chrome but the lists drops behind my rc-box in IE7. Any Idea?

    Thanks in advance !!

    If I can fixit I`ll let you know.

  14. Bill Lipa on

    Hi César, I will take a look if you send me a link to your website.

  15. Bill Lipa on

    @vicky – I did check the technique out in IE8 RC1, and it appears to work fine.

  16. Defonic on

    Nice tutorial thanks.

  17. Sneha S on

    Bill,
    You have simple & nice solution using the CSS3 attribute-values for rounded corners.
    What I meant is for browsers not supporting CSS3, can use absolute positioning, z-index & 4 corner PNG’s to achieve rounded corners in all except IE6. Sorry I don’t have link to my work yet. It is in progress. Thanks.

  18. Bill Lipa on

    @Sneha – you are correct. In fact, that’s the technique I describe in this very article!

  19. The Rollsteady Network » Blog Archive » links for 2009-03-31 on

    [...] Simple CSS3 rounded corners with support for IE — BestInClass.com Blog (tags: webdesign css corners rounded) [...]

  20. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? on

    [...] Simple CSS3 rounded corners with support for IE — BestInClass.com Blog Great rounded corner trick (tags: css css3 webdesign corners rounded roundedcorners corner webdev) [...]

  21. Mina on

    Thanks for the simple code. It works. After I saw the example page : CSS3 Rounded Corners With IE Fallback Example.
    Example is easier to understand.

  22. Angoli arrotondati sul proprio sito con CSS in 5 minuti | Flavio’s blog on

    [...] L’ultimo metodo è il più avanzato, perchè sfrutta le potenzialità del nuovo CSS3, messe a disposizione dai browser più recenti come Firefox, Safari, ed Internet Explorer 8 (finalmente). E’possibile consultarlo a questo indirizzo. [...]

  23. Bill Graham on

    Your css produces rounded corners very nicely in Chrome and Firefox. I have still to get your IE example working. I suspect it might have something to do with z-order.

    What is strange is that if I attempt to place some text directly within the rounded rectangle WITHOUT a markup, the text fails to be displayed. Once I use the tags, the text displays fine. If I place the text within a , same problem. But, if I place the text within a table’s tag, the text shows fine.

    This problem persists with all browsers using the CSS script you provided.

    What are the issues that might be causing this ? Could the same issue be affecting the rendering of round corners in IE 8 using your script ?

    Many thanks

  24. Bill Graham on

    My tag names didn’t display in the previous message. The text displays fine if I use a paragraph tag. The text fails to display if I use a “div” tag within the box. BUT, the text displays fine if I first place a table in the box and put the text within the table.

  25. Bill Lipa on

    Bill, I am wondering if some other CSS on your page is interfering with the markup. I don’t think there should be much difference between a “p” and a “div” tag unless you have some other CSS that is affecting it. You can experiment to find out what is causing the problem by starting with the minimum sample page linked in this article and then adding components from your page one at a time until you find what is triggering the issue.

  26. CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe on

    [...] Simple CSS3 rounded Corners with Support for IE [...]

  27. Felipe on

    While this solution promises simplicity it is not based on standards, while bashing IE7 for not being a decent browser!!! It does not work, for example, in the very good Opera browser too. Perhaps it won’t work on Chrome (didn’t mind downloading it yet). When a rounded-corner CSS standard comes up then everything will be fine… Until then solutions are mostly non-standard-compliant (like this) or too bloated, like many others… What a miserable state of affairs!

  28. Bill Lipa on

    Felipe, I think this is as close as we can get to the CSS3 standard at the moment in the major browsers (I don’t consider Opera a major browser currently – it’s consistently around 1% of traffic). While our solution uses the vendor specific prefixes for the CSS properties, they are close in spirit and behavior to the real CSS3 properties. It will be very easy to convert to the real standard properties when browsers support them.

  29. Dave on

    Cor spent days looking at rounded corner methods, most bollocks, complex, and managed myself, but with loads of added code and css.

    Yours is brill, so wish had seen it first.

    Thank you, why doesn’t ie just change its css support.

    Bill Gates you’re an idiot

    Dave

  30. Dave H on

    How about borders?

  31. Bill Lipa on

    Dave H, borders work fine with this technique. The only caveat is that the background has to be predictable, so you can make the little corner images for IE with the right backgrounds.

  32. Anna on

    Awesome technique. The only thing that I didn’t like was that it doesn’t work in IE6. No worries I just used conditional statement and used the border-radius.htc hack for anything less than IE7.

    Thanks again! Made my work day much shorter!

  33. Bill Lipa on

    Yeah, it would be nice if it supported rounded corners in IE6, but at least it degrades gracefully. Square corners aren’t so bad if it’s only IE6 users. I’ve more or less given up on cosmetic appeal for IE6 and just worry about basic functionality.

  34. margotta on

    great tutorial
    but it doesn’t work in ie8 :S

  35. Bill Lipa on

    It should definitely work in IE8. What problem are you seeing? Do you have a link to the site?

  36. Mona Everett on

    This is a great tutorial, and, if I am ever forced into it, I will try this. However, I really feel that if Microsoft cannot bother to implement rounded corners in IE, I cannot bother to go around the block to support them in IE either. IE users are not used to rounded corners in web pages so I just don’t give them rounded corners.

  37. Bill Lipa on

    Mona, I feel somewhat the same way, but in some cases rounded corners add so much to the look that it’s hard to abandon all IE users. Ideally, IE9 would implement the rounded corner CSS properties. I can’t believe it’s 2009 and we’re still slinging little corner images around the Internet for the most popular browser!

  38. dokania on

    Great support…

  39. Vancouver WD on

    Great post,
    Glad to see a decent alternative to chopping away in photoshop

  40. Tatsh on

    Only thing was I had trouble using filter:alpha(opacity=OPACITY) on a site I was making, instead just decided to leave the issue alone and hide (display:none) the top and bottom of a navigation link set, looks much better in Firefox/Safari/etc, but still functional in IE.

  41. David | WebModia on

    I am tired of seeing people promote bad practices. The author has good intentions, I’m sure. IE is the problem and the author is just offering an alternative workaround. But I feel compelled to repeat and draw attention to the main drawback of this “solution” (whereas the author only glossed over the fact), lest those newer to CSS or unfamiliar with standards-based design are misled. This solution uses a presentational hack – i.e. those empty divs are there solely to feed the corner images to IE7. This is no different than littering your markup with spacer gifs.

    Delivering background images for rounded corners via CSS using SEMANTIC markup that is already available is still the BEST option if you want cross-browser support that includes IE7 – this technique is well documented, and cleaner and more maintainable than any markup presentational hack. Either use that approach, or be bold and use the CSS3 border-radius to have your rounded corners for all modern browsers and let IE8 and below degrade gracefully with square corners. Or even use one of the well-documented JavaScript methods to dynmically generate the needed markup (falls under the general idea of progressive enhancement). The point is you have better options. Presentational hacks are never really the answer.

  42. Bill Lipa on

    The empty divs do offend my semantically pure sensibilities (I mentioned them as the first drawback, which is hardly ‘glossing over the fact.’)

    As with everything on the messy web, there are tradeoffs. I personally feel that it’s worse to send background corners to new browsers, slowing them down, than some empty divs which semantically mean nothing. And there are still too many IE users to be comfortable ignoring them completely. But hey, you and others may differ.

    As for the Javascript methods which involve hundreds of auto-generated divs of varying lengths and colors, essentially using divs to draw rounded corner pixels on the screen, now that fits my definition of a horrendous hack!

  43. Luke on

    Thank you for making this so simple. IE is obviously a pile of crap though = ).

Comments are closed.