They’re LIQUID! They’re TABLELESS! They’re ROUNDED and they use SPRITES!

Ok, maybe the subject of rounded cornered boxes has been beaten to death over the last few years with CSS becoming more and more agile. However, if you could humor me for a moment, allow me to present my solution to this issue:

I WANT A ROUND CORNERED HTML BOX THAT:

1. Expands both vertically and horizontally to fit the content I put in it!
2. Doesn’t require the use of tables (they are SO 2002)!
3. Offers a liquid format without it breaking in older browsers… *cough* IE6!
4. Uses sprites to help optimize my site and make fewer HTTP requests!

I actually have seen some great solutions to this problem but most of them included the use of tables or didn’t support liquidity. Also, a lot of them would simply just break in older browsers.

So here it goes. When I think of a rounded container in its simplest form I imagine 3 sections stacked vertically. A top section, a mid section and a bottom section. Both the top and bottom sections have 2 rounded corners and a repeating middle background. The mid section is composed of a left border, a right border, and a mid content section. However, in this example we wont be using images for the mid section, just simple CSS.

So now that we have a good idea of the anatomy of this rounded box, how do we actually build it?

Well, we need the necessary pieces. I have separated this tutorial, fittingly, into 3 sections. So, lets jump in to our handy dandy photo editor. In this case I will be using Adobe Photoshop CS3.

COULD SOMEONE GET ME A “SPRITE”?

To begin, lets create our sprite first.

1. Draw a rounded cornered box on the canvas. In this example we will use a 10px radius for the box.
2. Once drawn lets add a nice 4px border to it through the layer style tool. There you go… a round box… Wow… what a sight…

So we have our box, what next? Well, get out that “slice” tool because you’re going to need it! The key here is to get only what we need and to keep it consistent. We want to use as few images as possible.

Once you have the slice tool ready, let’s start slicing by zooming in to the left corner of our box. make sure to cut up to the point of repeatability. In this case I have gone just beyond the “corner bend” by about 3px. I know that my top-middle slice will match the color of the right edge of the corner slice we just made. This gives me a nice 15×15 square.

Now lets do the same thing to other side and the bottom section. Remember to keep it consistent. This cut should also be a 15×15 cut.

Now lets take a slice out of the top and bottom middle. Since this will be a repeating element we only need a 1×15 cut. So 1px wide and 15px in height to keep the sizes consistent.

You should now have 6 cuts made and your box should look something like this:

Now it is time to export these pieces. So go to “File” – “Save for Web & Devices”. I usually do the “2-up” view. we want to export all of the cuts at once so select them all by holding “shift” on your keyboard and ensure that the “slice selection” tool is selected. You will see them highlight as you select them.

Next, make sure that the export format is set as “png” (Setting it to this format keeps the image mode RGB making it easier to create the sprite when we are ready).

Then select “Save”. Select your desktop for the save area. Make sure that “Selected Slices” is chosen in the “slices” drop down box at the bottom. Don’t worry about what the slices are named for now. Then click “Save” again.

If everything worked out, you should have 6 png images on your desktop.

Now that we have our slices done, let’s bring them back in photoshop so that we can create our sprite.

Once all the slices are opened in photoshop. Create a new file and set the hight of the new file to 15px in width (Longest width) and 90px in height (15 X 6 = 90). Then zoom in to make it easy to move your slices in to the new canvas.

If you found that you accidentally exported your slices as “GIFs” you will discover that your slices wont drag and drop onto the new canvas you have created. But don’t worry, just go to each slice, select it, go to “image” in your toolbar, select mode, and then change the mode from “index” to “RGB”.

Drag your slices over one-by-one to the new canvas, stacking them vertically. I usually like to go from left to right, top to bottom for the corner slices and then I place the 2 mid slices at the bottom.

Once I am done dropping in the middle slices for the top and bottom, it is important to make sure you stretch those 1px by 15px slices out to be 15px by 15px. This will ensure that you don’t have breaks in the background when implementing them in a repeating background. Once done, your sprite should look something like this… hopefully:

Now that we have our sprite, let’s clean it up just a little. Remember, the less pixels your browser has to render, the better. So select each corner layer and use the “Magic Wand” tool to remove that excess white background around the curve. Set the wand tolerance level to around 2.

Now that we have removed the “fluff”, let’s export this sucker! Let’s go back to “save for web” in the “File” menu. This time make sure “gif” is selected for the export option and set the colors to 32. You wont even notice the difference and it will drop the size of your sprite from about 766 bytes to 433 bytes! Every byte counts! Now hit “save” and lets call it “g_box_spt.gif” and save it to your desktop. Once it is saved on your desktop, create a folder called “images” on your desktop and place your “b_box_spt.gif” into that “images” folder.

CONGRATS! You have just made a sprite! GO ahead an delete those extra slices off of your desktop. You wont need them anymore. Lets move onto the next section.

HTML TIME!

I have taken the liberty of writing the code for you. Simply download the HTML code here, unzip it and open it up in the HTML editor of your choice and I will explain how it is setup.

After pasting your code save your file to your desktop as my_box.html. Now if we pick apart the code you will see that I have three sections: top, mid, and bottom! How revolutionary! We will be going through the CSS in just a moment, but just know that the “box_top_lt”, “box_top_rt”, “box_btm_lt”, “box_btm_rt” are your corners. While the “box_top_mid” and “box_btm_mid” classes are the repeating backgrounds for the top and bottom.

The interesting thing we have done here is we have nested the corner images within the repeating background “divs” and for good reason. This will help each level to better function as a single group stacked one on top of the other.

NOW ONTO THE CSS

Create a folder on your desktop named “css”. Then download the CSS code here and save it into the “css” folder. Then open your HTML editor to view the css file.

This is where the true magic happens.

In the “FIRST” section:

1. I have defined a width on the “.box_wrapper”. I set it to a percentage so that it is liquid.
2. I created a “clear” class to clear the floats that we are using.
3. I then applied the sprite to all of the listed classes that contain an image.We know that the height for all of the classes will be 15px because we made sure to keep that consistent when we created our slices.
4. The key to making this work is the “relative” positioning. This allows us to manipulate any of these classes and move them pretty much anywhere. For more information on how absolute and relative positioning works read this article. I also set the font size to 0px to fix spacing issues in IE6.

In the “SECOND” section:

1. Further define common properties amongst classes, such as; setting the width for the classes that contain corner images to 15px and setting the classes that contain the middle slices to repeat horizontally.
2. At this point the relative positioning and floats come into play. Remember that the “.box_top_lt”, “.box_top_rt” “.box_btm_lt”, “.box_btm_rt” classes are contained within the “.box_top_mid” and “.box_top_mid” in the HTML. So we float the left corner images to the left and the right corner images to the right within the mid background div.
3. Now, if we stopped there and looked at the HTML in a browser we would notice a tiny corner of the repeating background poking out from behind the corner images. We don’t want that so we push those corners out 15px more to the left and to the right by using the relative positioning property we defined on all of the classes in the “FIRST” section.
4. Now, that we have ensured that everything is in place we need to properly reference our sprite. This can be a little tricky because you need the starting y position on the sprite so you can either go back into your photo editor and figure it out that way or you can use simple addition. we know that the top left corner was lying on the 0,0 axis so that means that the top right corner was lying on the 0,15 axis so put “background-position: 0px -15px;” and so on.
5. Now that we have all the background images matched up and all the classes in place we need to create the mid container. That is as easy as setting the background to the content color you used when creating your box. In this case it is #FFF. Then we place a 4px border with the color being #9D9D9D, on the right and left side ONLY. This will tie the top, mid and bottom sections together. Once you have that all in place your box should look like the demo example here.

From here you can mold this box however you like. Want to center it? Throw a “margin: 0px auto;” on the “.box_wrapper” class. Add as much content you want to it, it will stretch. Test it in all your different browsers, it wont break! This method works great for liquid buttons, liquid modals, liquid pop-ups you name it. A lot, of which, I will be covering in the coming months so stay tuned.

I hope this helps those of you with those same “WANTS” that I had. Again, this is just a basic example and I am probably not the first person to come up with it. Either way give it a shot and let me know how you like it or if you have any questions or suggestions.