What you need

This tutorial assumes that you have a decent working knowledge of CSS and a little javascript (necessary if you want full IE6 support).  You’ll also need some sort of graphics editing software such as Adobe Photoshop or the GIMP.  I’ll be using Photoshop.

Step 1: Design Your Box

You’ll need to start off by creating an image of how your box will look when it’s finished.  For now I’m going to create a simple grey box with dark grey corners, something like the image you see here.  To create something similar simply draw a rectangle with rounded corners and add a 1px stroke.

It’s important that your box goes right to the edge of the image, so trim off any unneccessary white space.  You can save this as box1.gif.

Step 2: The corners include

The concept of this solution is to include four divs – one for each corner – that will be positioned absolutely within our both and styled appropriately.  Since this is the sort of technique that gets reused many times in the site, I prefer to create an include that contains all four corners.  Create a new file called ‘corners.html’ and place the following markup inside:

<div class="tl corner"></div>
<div class="tr corner"></div>
<div class="bl corner"></div>
<div class="br corner"></div>

You’ll have noticed that each div has two classes.  The first just tells us which corner it is (top left, top right, bottom left and bottom right respectively).  The second lets us easily apply styles that all four corners will use.

Step 3: The Box

Let’s create the box and the markup we’ll need now, and then we’ll style it up once we’re done.  Where you want your box to appear, type the following code:

<div class="box1 corners">
    <!--#include virtual='/path/to/corners.html'-->
    <div class="boxContent">
        <p>This is where your content will go</p>
    </div>
</div>

I’d better explain some of this.  The outer div is the box itself.  This will be styled to match your design and hads the extra class “corners” there to allow you to apply classes to all of your boxes, as well as making some of the javascript easier later.

Next is the corners include, which includes the four divs you created a moment ago.  Much nicer than including those manually every time, huh?

Last is a div called “boxContent”.  This is the div you’ll apply all of your padding to (allowing you to declare width:100% on the box itself without breaking anything).  It’s also useful to put overflow:hidden on the inner div to prevent the Firefox Float Bug if you float the contents of the box – this wouldn’t work on the outer box as the corners will need to be placed outside the box in order to work.  If all isn’t clear, don’t worry, just read on.

Step 4: The CSS

Ok, now for the fun part.  We’re going to start by styling up the basic box without rounded corners.  Basically what we need is a background colour, border and some padding.  Copy the following into your stylesheet:

/* This allows us to position the corners relative to the box instead of the page */
div.corners { position:relative; }

/* This will make sure your corners never display over your content */
div.boxContent { position:relative; z-index:3; }

/* Styles specific to box1 */
div.box1 { color:#000; background:#E0E0E0; border:1px solid #666; }
div.box1 div.boxContent { padding:12px; overflow:hidden; }

That’s it for the box.  Now for the corners.  They’re all going to be the same size and have many similar properties.  I like to create a seperate stylesheet for box/corner styles, but you’re welcome to put them where you like.

div.corner { width:12px; height:12px; position:absolute; z-index:2;}
div.tl { top:-1px; left:-1px; background-position:top left; }
div.tr { top:-1px; right:-1px; background-position:top right; }
div.bl { bottom:-1px; left:-1px; background-position:bottom left; }
div.br { bottom:-1px; right:-1px; background-position:bottom right; }

This has given us some universal corner styles.  Now we need to point our box 1 corners at the correct background image.  Add this line to your stylesheet and you’re good to go:

div.box1 div.corner { background-image:url(/path/to/box1.gif); }

Go on – check out your box now.  If you’re thinking that it can’t be that easy, think again.  You only had to cut out one image, not 4, and the box resizes perfectly in every modern browser.

The Exception to the Rule

Unfortunately if you’re using IE6 you’ll notice a rather frustrating bug.  If your box width or height is an odd number the bottom and right coordinates of your boxes will be 1px too short, meaning the border will show through.  There are two solutions.  The first uses javascript, and is my preferred method, to be covered in another post.  The second method involves only css:

The easiest way to fix the right coordinate is to fix the width of each box to an even number.  This isn’t too bad for fixed width sites, though could pose a problem for fluid layouts.  Unfortunately the bottom coordinate can’t be so easily fixed due to the fact that boxes should expand downward depending on the content.  So we need a more complex solution.

First, add the following line to corners.html:

<div class="btm corner"></div>

This div will be styled to mimic the bottom edge of the box.  We’ll need a background image for it, which will be a 2px or greater slice of the bottom of the box.  This will need to be repeated horizontally, so make sure there’s nothing else in the image.

Now you’ll need to change the “bottom” coordinate of your “bl” and “br” corners to -2px instead of -1px.  This means the corners will display 1px further down than they should.  This is where the “btm” div comes into play.  Add the following to your stylesheet:

div.btm {
    height:12px;
    width:100%;
    bottom:-2px;
    left:-1px;
    background:url(/path/to/box1-btm.gif) bottom repeat-x;
    z-index:1;
}

Now the bottom div will display 1px out the same as the corners, but because the three divs cover the bottom edge of the box, you can’t see the discrepancy, providing a CSS only solution to the problem.  Note that the bottom div needs to be placed below the two corners, hence a z-index of 1.

Next time: A Javascript Solution

Next time we’ll look at fixing the IE6 problem using JQuery to reposition the corners depending on the width of their parent.