Dave Woods - Freelance Web Design Warwickshire

CSS Rounded Corners Tutorial

This is a simple tutorial to demonstrate how easily rounded corners can be created within a webpage using HTML, CSS and four images.


Here’s an example of what we’ll be creating

Rounded corners seem to be a must have for any web designer at the moment and the concept behind them is fairly simple but I see questions being asked repeatedly on web design forums so thought it might be about time to put together a simple tutorial to explain how this can be achieved and supported in all the current browsers.

The Images

topleft-corner.giftopright-corner.gifbottomleft-corner.gifbottomright-corner.gif

Before we get started you’ll need the four images above which will make up the four corners of our rounded box. We’ll be creating a grey box in this example but you could quite easily create your own four images in the colour of your choice.

The HTML

The HTML is relatively simple. We have a container for the box and then within this we’ll be using a topleft, topright, bottomleft and bottomright div to surround the actual content of the box.

The content of the box is simply made up of an h1 tag and a paragraph tag which contains a little content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Rounded corners demo</title>
</head>
<body>
<div class="container">
<div class="topleft"></div>
<div class="topright"></div>
<h1>Rounded corners demo</h1>
<p>This is a demonstration to show how rounded corners can be achieved within a webpage.</p>
<p>The full tutorial explaining the concept behind this page can be found here</p>
<p><a href="#">Rounded corners tutorial</a></p>
<div class="bottomleft"></div>
<div class="bottomright"></div>
</div>
</body>
</html>

The CSS

As with all my tutorials, we’ll start off by resetting the padding and margin’s and also set a few general rules for the layout of the page.

* {
padding: 0;
margin: 0;
}
html {
overflow-y: scroll; /* firefox scrollbar fix */
}
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 83%;
width: 500px;
margin: 0 auto;
padding-top: 10px;
}

Next, we’ll set a few rules for the container div by providing it a background colour and also as I know that we’ll be using float’s within the container, I’ll also apply overflow to it to clear the float’s and also provide a small hack to force “layout” in IE6.

.container {
background-color: #999;
overflow: hidden;
}
* html .container {
height: 1%;
}

Once the container is in place we can then add the corners to the box. These are simply applied by providing a background image, dimensions and floating the corner into it’s relevant position.

You’ll also notice in the following code that we’ve provided the font-size: 0; value. This is to correct a bug in IE6 whereby a box will not render smaller than the inherited font size so this gets around this issue.


.topleft {
background-image: url(topleft-corner.gif);
width: 12px;
height: 12px;
font-size: 0;
float: left;
}
.topright {
background-image: url(topright-corner.gif);
width: 12px;
height: 12px;
font-size: 0;
float: right;
}
.bottomleft {
background-image: url(bottomleft-corner.gif);
width: 12px;
height: 12px;
font-size: 0;
float: left;
}
.bottomright {
background-image: url(bottomright-corner.gif);
width: 12px;
height: 12px;
font-size: 0;
float: right;
}

Finally, we’ll set a few rules for the h1 and paragraph so that the content is nicely padding within the box and consistent across browsers.

I’ve used 12px for the padding around these elements so that it’s consistent with the actual corners themselves but you could obviously vary this depending on your design.

h1 {
font-size: 150%;
padding: 12px;
}
p {
padding: 0 12px 12px;
}

Summary

There are other methods and ways of achieving rounded corners but I tend to use this approach as it’s the most consistent cross browser (supported in IE6, IE7, Opera, Firefox and Safari) and only requires a little extra markup (four extra div’s).

Please feel free to comment if you like this approach or obviously if you have any other suggestions as to achieving the rounded box.


21 comments on “CSS Rounded Corners Tutorial

  1. Pingback: The Geeky Blog Updates » Blog Archive » CSS Rounded Corners Tutorial

  2. Anjanesh

    I normally use -moz-border-radius and -webkit-border-radius for FireFox and Safari. Now that Opera 9.5b is out, I was hoping it would support CSS3’s border-radius property – maybe very soon I guess.

    But loading 4 images just for the sake of IE – it would be much better off if IE 7.nextVersion implemented some sort of rounder-corder attribute.

  3. Dave Post author

    Thanks for the feedback Anjanesh. I agree, the sooner CSS3 arrives the better but for me, IE still represents too much of the market to ignore completely.

    I suppose it depends how important it is to the designer as to whether a square box is acceptable to anyone using a browser that doesn’t support border-radius.

    Personally though I strive for consistency in all the major browsers, including IE6 so until the market share for IE6 and 7 drop, this is the method that I’d recommend using but see no problems with others using progressive enhancement methods if they so wish. 🙂

  4. Jermayn Parker

    Yeah I agree, that there is no point in having one browser viewing it differently to another.

    In regards to the article I was actually surprised to see just how simple it was with the four extra divs. Would have thought you would needed to do more CSS than just floating them in the corners.

    Thanks

  5. Dave Post author

    Glad you found it useful Jermayn.

    In fact, I’ve been thinking about this code and it’s possible that one of the div’s could be removed as the topleft image could be applied directly to the container div so I’ll make that update to the code shortly 🙂

    Thanks

  6. Pingback: echo20 » Blog Archive » CSS Rounded Corners Tutorial

  7. Vinnie Apicella

    Very interesting. Please forgive my ignorance, but wouldn’t it be simpler to just create something like this in an image editing program like Photoshop? Or is this meant to be a useful alternative to such a program? It seems relatively easy to create a rounded box and then use that for your site. But I’m not speaking from experience, I haven’t really done that and want to be clear on what the benefit is using one or the other.

    Nice work in any case.

    Thanks, Vinnie.

  8. Dave Post author

    Hi Vinnie. The purpose of this is so that it can contain any amount of content. If you create an image in Photoshop then it will be a fixed width and height. If you decide you want to add more content then you’ll need to go back into photoshop and create another image.

    This would become even more complex when dealing with dynamic content where you don’t even know what height you need.

    With this solution, you can create a rounded box which will expand with the content and therefore you only require four small images which not only are much smaller in filesize but can also be used across various pages as they’re completely adaptable.

    Hope that helps.

  9. Vinnie Apicella

    Thanks Dave, yes it definitely does, I should have realized that. I’ve tested it out and it looks good. Just another quick question. What purpose does this style serve:

    * html .container {height: 1%}

    I’ve never used “*” by itself in a style before and I’m not clear on what this rule achieves overall.

    BTW, can anyone confirm that the complete box w/rounded corners does in fact look awkward when viewed on the Dreamweaver design page? (yet looks fine in the browser)

    Thanks!

    Vinnie.

  10. Dave Post author

    Overflow hidden on the container clear’s the floats in all modern browsers including IE7 however this method doesn’t work for IE6 and below alone so we need to give it “layout” (Do a google for “haslayout” for an explanation although I may cover this soon here).

    If we apply a fixed height to modern browsers then they will remain at that height whereas IE6 treats height as min-height so using the star selector only targets IE6 and below so it’s a safe way to clear the floats for these browsers.

    Your assumptions of Dreamweaver design view are correct. Also, always check your work in the most modern compliant browsers first (Opera, Firefox, Safari) and work backwards.

    Hope that helps.

  11. Vinnie Apicella

    Thanks for the explanation. It definitely helps, but a bit complicated for someone like me with a minimal understanding of floats and layout and so forth. Would be welcome if you were able to cover it in more detail in the future. Very interesting stuff overall.

    Cheers, Vinnie.

  12. nitinpai

    Nice tutorial Dave.

    Well I have thought this same solution but I am trying for some other solution which wouldnt require me to include those unwanted divs.

    Maybe CSS3 will do the trick in future.

  13. Dave Post author

    CSS3 will certainly be able to achieve rounded corners and can be used for some of the modern browsers so you may use it for progressive enhancement to give those with the latest browsers a better experience whilst ensuring the site is still usable for those without any CSS3 support for rounded corners.

    There are other solutions, including spiffy corners which requires no images at all but does use a lot of extra code which I personally don’t like and find the above solution to be the easiest to use at present time which supports all browsers.

  14. Jonathan

    This really is a great tutorial. I have a client who I am designing a site for a needed to know how to use this rounded corners effect. Thanks so much!

  15. Pingback: Dave Woods - HTML, CSS, Web Design » CSS Rounded Corners Revisited

  16. Doug

    Dave-

    I worked on numerous rounded corner “solutions” for about 5 hours last night – each with a problem in the latest versions of at least one of the browsers I test: IE vers 7.0.5730.11, Firefox vers 1.5.0.12, Opera vers 9.5.1, and Flock vers 1.2.3.

    Finally I stumbled upon your solution, which works beautifully in all 4 browsers – thank you! There was one issue that I had with Foxfire and Opera – if I clicked outside the page, it selected all. Very strange. Through a little trial-and-error I discoverd this fixed the problem:

    I added another div just after the top right div which I called “centerfill” with this css:

    .centerfill {
    width: 10px;
    height: 10px;
    font-size: 0;
    }

    I did not have to add it after the page content (before bottom left). Hopefully this won’t break the layout in future browser and CSS versions.

    p.s. for your readers, I used this handy site, http://www.neuroticweb.com/recursos/css-rounded-box/, to create my corner images.

  17. Doug

    Sorry, a little clarification. The extra div I added was not a wrapper for the content, it was inserted like your divs above immediately followed by the closing tag:

    And I did not have to add this a second time after the footer.

  18. Pingback: Novice needs help on web design.. -

  19. sumant

    I am not familier with web technology. I am new for all this things. I could not understand how and where to set rulles and how to use css. I suggest, you should concider new commers also, and should give compleate page code. I may be wrong, but to learner like me, those don’t know nothing will confuse and would not able to use such a useful things.

  20. Dave Woods Post author

    @Sumant – There’s lots of tutorials on the web for beginners so my articles are aimed more at web professionals who are looking for solutions to common problems. However, if you give the following site a try then it will guide you through all the areas of HTML/CSS: http://www.htmldog.com/
    Hope that helps?