Rounded Boxes 101

CSS3 promises to gloriously simplify many of the design techniques we designers implement every day.  One of these is rounded corners on boxes behind content.  And some browsers (Firefox 3, Safari 3) already support this new CSS property.  But as long as Internet Explorer does not provide this support, and as long as clients are using older browsers, we will need to continue to employ these techniques.  So without further ado, here are the steps to easily accomplishing a rounded box that has fluid height.

1. Decide what width your content will have.  For this example, we will use a width of 500px.

2. Open up Photoshop or the image editing program of your choice and create a new document with that width and a transparent background.

3. Select the “Rounded Rectangle” tool and draw a rectangle that encompasses the document.

   


    Note:  Make sure you can see those little white spaces at each corner!

4. If you would like your box to have a border, right click or ctrl-click the box layer and go to “Blending Options”.  Click on “Stroke”.  I used the following settings:

    
5. Now it is time to slice up your image.  You will need top, middle, and bottom.  Make the following selections using the “Rectangular Marquee” tool and copy each one to a new document.  Save as “top.gif”, “middle.gif”, and “bottom.gif” or something similar.

   

6. Once you have these three files, you are ready to implement.  The HTML mockup goes as follows:

    <div class=”roundbox”>
        <h3>Header Text Goes Here</h3>
        <p>Content is here.  This box's height will expand to fit however much content I have!</p>
    </div>

7. Then, just a few lines of CSS to get the images in:

    .roundbox {
        background: url(middle.gif) left bottom repeat-y;
        margin: 5px;
        width: 500px;
    }
    .roundbox h3 {
        background: url(top.gif) left top no-repeat;
        margin: 0;
        padding: 10px;
    }
    .roundbox p {
        background: url(bottom.gif) left bottom no-repeat;
        margin: 0;
        padding: 10px;
    }
 

And there you have it!  
    
Notes:

There is a small issue in IE if you use multiples of these one right after the other.  IE will bleed the repeated middle.gif into the space between the boxes.  This can be simply resolved by adding an empty <div> with some amount of top padding in between each rounded box.