Dave Woods - Freelance Web Design Warwickshire

CSS Rounded Corners Revisited

Rounded corners within web design has been a trend for some time now and there are various ways of creating this effect. This tutorial will demonstrate how it can be achieved by using just one circular image and a little CSS knowledge.

I initially covered this topic back in October which used four separate images for each corner of the rounded box, but whilst it’s a perfectly valid solution, I’ve been trying to think of a better way that this can be achieved so with some subtle changes to the original tutorial I give you, CSS Rounded Corners with One Image.

Example

Here’s an example of what you’ll can create with this solution.

The Image

As promised, this tutorial makes use of one circular image which we can then use along with CSS to create our rounded box.

Here’s the image I’ll be using for this tutorial:

HTML

The HTML is fairly simple and just requires an extra span for each corner of the box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Rounded Corners Revisted</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<span class="tl"></span><span class="tr"></span>
<h1>CSS Rounded Corners Revisted</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tristique venenatis ligula. Ut massa leo, tincidunt sit amet, tincidunt nec, volutpat ac, lorem. Integer odio. Donec tempus. Nam vestibulum lectus ut pede. Donec mattis nunc et quam. Duis ipsum eros, interdum eu, auctor gravida, rhoncus sit amet, odio. Curabitur sit amet urna. Quisque et sem. Sed laoreet purus quis risus.
</p>
<p>
Vivamus elit. Mauris odio felis, bibendum eu, eleifend non, rutrum in, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada sapien sit amet risus fringilla nonummy. Praesent laoreet tristique sem. Vestibulum venenatis congue lacus. Etiam volutpat, lacus sit amet eleifend posuere, purus leo bibendum nulla, sit amet vulputate nisi elit at ante. Nulla luctus, eros id tempus vestibulum, velit quam suscipit arcu, id tempus tortor felis et ante. Donec bibendum dapibus mi. Integer nunc. Donec nonummy, turpis non posuere tempor, libero magna semper ante, in egestas erat odio pharetra metus. Vivamus semper fringilla felis. Morbi ultrices sapien nec odio. Fusce vitae lectus. Proin feugiat, ipsum quis accumsan feugiat, diam dui vestibulum arcu, nec vehicula leo nisl tincidunt lorem. Donec sit amet ante eu lorem aliquet scelerisque. Suspendisse erat mauris, semper ut, pharetra ac, ultrices id, sapien. Cras enim. Fusce velit.
</p>
<span class="bl"></span><span class="br"></span>
</div>
</body>
</html>

CSS

We’ll start with some generic bit of styling

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

Next, we’ll supply a background colour and font size for the container but as we also know that we’ll be floating the corners within the container, it makes sense at this stage to clear the float’s using overflow: hidden; and to also apply the haslayout fix for IE6

#container {
background-color: #247CBA;
font-size: 0.75em;
overflow: hidden;
}
* html #container {
height: 1%;
}

The last step before we deal with the actual corners themselves is to add some spacing and styling for the actual heading and paragraphs.

The padding of 10px matches the size that we’re going to be using for the corners so will provide consistent spacing but you can obviously play with these values within your own design

#container h1 {
font-size: 1.7em;
clear: both;
padding: 0 10px;
}
#container p {
padding: 0 10px 1em;
}

Now that the foundations are in place, we can add the corners to complete the design.

.tl {
background-image: url(circle.gif);
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.tr {
background-image: url(circle.gif);
background-position: 10px 0px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}
.bl {
background-image: url(circle.gif);
background-position: 0px 10px;
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.br {
background-image: url(circle.gif);
background-position: 10px 10px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}

These four styles are applied directly to the four spans that we created within the HTML. Each one has the same background image applied along with the same width and height as well as the float relevant to the corner’s position applied.

The font-size: 0; also corrects a problem with IE6 whereby it won’t render smaller in height than the base font size so this fixes that little bug.

The clever bit though comes with the use of the background-position. By using the different values we’re able to position the 20x20px image so that it only shows the relevant corner of the circle within the 10x10px box that we’ve setup.

Summary

By using this method, there’s no need to slice multiple corners in Photoshop/Fireworks and you’ll have the added benefit of noticing slightly smaller filesize, especially if you reuse the same rounded box method across a site.

As always, please feel free to leave any comments if you have any questions or suggestions.

34 comments on “CSS Rounded Corners Revisited”

  2. Jermayn Parker

    The thing that I like about this is that it can work for any size..

    I tried changing the width etc of the container div and sure enough it stayed intact.

    I was at first a little septic of the extra spans but I can live with that 🙂

  5. Dave Post author

    @Jermayn – Yeah, it will work with any width and any amount of content so it’s perfectly flexible. Just create one circle image that you want to use and then set the background colour and you should be good to go.

    @Gregg – I’ve not seen that solution before. It does use JavaScript so may not be available to all your users but as it’s only being used to enhance the appearance then it’s a perfectly viable solution as long as you’re aware that some of your users may just see a square box.

  7. Pingback: tom’s weblog » Blog Archive » CSS Rounded Corners

  8. Andrew

    A pure-css (and extra html) method can be found at http://www.ihsen.com/Support/CSS/PureCSSRoundedCorners.htm
    It’s pretty flexible, and you could probably adapt it to work with span elements instead of bold elements. Of course, while it doesn’t require images, it won’t give you nice anti-aliased corners :3

    I’m currently using that CSS coupled with nonintrusive JS in a school project to get the desired effect; I’ve also managed to modify the CSS in such a way as to give it “transparent corners”.

    Seeing as it’s presentation-only, I don’t see a problem with using JS to keep my HTML markup clean 😉

    I haven’t tried Gregg’s JQuery method, though.

  9. Fazal Khan

    Hi Dave,

    This is a pretty nice method. I think the only thing to work into it would be the ability to work with dropshadows. Otherwise, thanks for sharing!

  11. jeffld

    Nice job setting up this tutorial! One image is a nice thing. I’ve seen something like this on the apptools.com site.

    @Fazal Khan,

    Three is a some code of how to create drop shadow rounded at roast-horse.com

    http://www.roast-horse.com/tutorials/_tutorials/css_corners2/index.html

    I’ve been working with PHP and GD to try and create the images from a prebuilt box image and then generate the code.

    You can take a look at what I’ve got so far if you want.

    http://www.polysyncronism.com/CodeShare/gdcrop/

  12. Pingback: polysyncronism.com » Blog Archive » CSS rounded Box

  14. Dave Post author

    Not sure if that information is available yet. I hope so but guess we’re waiting for the beta to find out.

  16. Patti

    This was a very good tutorial. I found your first one by googling. Good thing I checked the bottom part where the message board is or else I would of missed your follow-up article.

    I like the one image more because I also have a color schemer and it’s much easier to just create 5 circle images and no slicing.

    I find this to be a much better solution than javascript it again works well with the color schemer on the page.

    Thanks very much for posting this tutorial.

  17. Pingback: Dave Woods - HTML, CSS, Web Design » Creating Rounded Corner CSS Boxes Using One Image

  18. Kerry Kobashi

    Dave,

    Nice work. This is by far one of the best solutions for rounded corners. I hate having to deal with the nuances of fixed width boxes and fudging all those Photoshop files.

    The flexibilty of expansion and contraction in both height and width makes this an ideal solution. At the moment, I’ll trade four spans for four divs anyday. Sure, there’s some CSS bloat and it gets even heavier if you have multiple rounded boxes but its so simple and easily maintainable.

    Thank you!

    Four empty spans. Clever Dave, clever.

  20. leonson

    Many thanks for this tutorial. Saved me a lot of time. I think I can add something though, don’t know if it’s very difficult to figure out but here it is anyway:

    Suppose you want to have round corners on a div which needs to have a fixed height, regardless of its contents’ length. In that case your bottom circles would stay in unnatural looking places (before the div’s bottom) and the bottom corners of the div would still be sharp. To avoid this, using this example’s code, add the content in the two p tags inside a separate div. So the structure inside the container div would be:

    span tr -> span tl -> div ‘conent’ (or whatever you call it, that’s where all the text goes) -> span br -> span bl.

    Give ‘position: relative’ and ‘height:100%’ (or something very near, like 98.6% in my case – depends on the circle divs dimensions) to the ‘content’ div and you’re all set. Now the content div will always push the two bottom circle spans to the, well bottom of the container div. And it doesn’t matter how much text you have in the content div. 🙂

  21. speedovation

    This is so cool.I just love this idea.

    One Question if we want to use full image with round corners but want a expandable height.How can I achieve this?

  22. Chris

    Dave,
    I have been looking at articles trying to find the best (clean) way to have rounded corner div’s in a hybrid layout that is using em’s for the sidebar div and percentage for the main content.
    Your tutorial looks like an awesome way to achieve this, unfortunately, I am not a web guru and I am running into problems getting it right. If you are still monitoring this thread…any advice would be greatly appreciated.
    Thx for the great tut! 🙂

  23. Lance

    Hi Dave,

    Great tutorial. Do you know of anyway to be able to make this overlay a gradient, instead of a solid color background?

  24. Pingback: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know

  25. Scott

    This is a nice way to do things. This seems a nicer approach than making the 4 images, though you really only need to make one image and then rotate it and save it 3 more times to get your four images. Still, ever bit of work saved helps and it is a lot less cluttery in your images folder.

    I’m assuming you could make rounded borders with one image? Or maybe it would take two to be sure the colors of the borders matched exactly since any one pixel of anti-aliased corner border might be a bit different in color than a straight line for the border would be.

    As far as Lance’s question about overlaying a gradient. It doesn’t seem easy to do, since you’re just really covering up the square corners of the box with the round corners of your image. It doesn’t seem easy to cover up these box corners since you dont know the exact colors of a background gradient, and it you leave the corners transparent then the original square box shows through.

  26. Scott

    Actually, come to think of it, there is a way to make round corners over a gradient. It’s just more complicated and would involve creating 9 boxes.

    Think of a tic-tac-toe board (noughts and crosses across the pond). Your actual content would go in the middle square. The strategic corner boxes would contain rounded corner images. They could be transparent since they’re not covering up the interior of a colored box. The middle of each side row could be filled with a solid color for a colored box.

    This might give you too much padding around the edges, but it would work against a gradient background since you’re not matching the background color.

    To get less padding you could do some nasty absolute positioning and move the rounded corner and side boxes in by just under the length of the radius of the circle (so the square corners of the actual content box don’t stick out into the background space you want to keep clear).

    It sounds like a nice fun problem. I bet I could write some code (javascript or server-side scripting language) that would do it given a circular image and told the radius or diameter of the circle.

  27. Scott

    Er, that would be half the radius or so that you’d want to move the corners in to get rid of the padding and leave the background of the corners transparent.

  29. Jay

    Hi Dave
    I keep getting just white boxes in each corner where the circle .gif should be. I am using the correct references to my .gif folder. As if I select another .gif image in same storage folder, for instance, it shows in the position where the circle should appear. Any clues?

  30. Dave Post author

    Hi Jay,

    Could you put an example online somewhere or email me a copy or all the files and I’ll take a quick look for you.

  31. Pingback: Dave Woods - Freelance Web Designer UK » CSS3: Rounded CSS Corners