CSS Boxes with Outside Frame (Rounded or Not)

The designer I work with wanted to have a site with information inside boxes. He also said that there would be a lot of boxes of variable height and width. More to that, the boxes needed to have a custom border all around and both the bottom side and the left one of the box would have a shadow that would be positioned above a random pattern.

That was quite a challenge!

See a live preview here…

As you all know the magic of alpha transparencies comes within PNG. Fully supported by Firefox, Safari and IE7 it really is a mess with IE6. If you don’t know how to support Alpha Gradient Transparencies in IE6 read this article here.

To start with let me show you the final result:












The designer passed me the work in a Fireworks file which came quite handy because all elements were selectable and madethe cutting very very easy.

When I was finished I had something that looked like this:

As you can see in the picture on the left all sides of the frame have been cut down to a minimum and will expand via CSS. By the time you are reading this you might have the feeling… “haven’t I read this somewhere?”… well, perhaps you have, perhaps you haven’t but what is really unique about this composition is the fact that it will expand and shrink to follow your needs keeping your bandwidth short.

‘A List Apart’ has a great tutorial on how to do boxes with CSS. The only thing I don’t like with their solution is that fact that you have to use an image with the weight and hidth as high as you intend your box to be. If it so happens that you need to max-out that pre-defined size, you have to make a new image. With my solution you only need to alter a value in a CSS file. Theirs is, however, more semantically correct than this one.

Let’s get our hands dirty.

The first thing to do is place all images inside DIVs.
<div>
<div><img src="left_top_corner.png" width="20" height="20" alt="" /></div>
<div><img src="top.png" width="100%" height="20" alt="" /></div>
<div><img src="right_top_corner.png" width="27" height="20" alt="" /></div>
<p />
<div>
<img src="left.png" width="20" height="2" class="insidePNG_left" />
<img src="right.png" width="27" height="3" class="insidePNG_right" />
<div>
Here Goes Content
</div>
</div>
<p />
<div><img src="left_bottom_corner.png" width="20" height="27" alt="" /></div>
<div><img src="bottom.png" width="100%" height="27" alt="" /></div>
<div><img src="right_bottom_corner.png" width="27" height="27" alt="" /></div>
</div>


The result can be a bit disappointing. Notice that the top.png and bottom.png files have a width of 100%! That will ensure that our box can have any kind of width. Now let’s try to position the corners correctly.

We have to define a class to the outmost DIV that will define the box’s width. The height of the box will vary according to content. We must also position the 4 corners in their places and make sure that both the top and the bottom DIV’s expand correctly.



The markup with classes.
<div class="wraper size position">
<div class="top_left"><img src="left_top_corner.png" width="20" height="20" alt="" /></div>
<div class="top size"><img src="top.png" width="100%" height="20" alt="" /></div>
<div class="top_right"><img src="right_top_corner.png" width="27" height="20" alt="" /></div>
<p />
<div>
<img src="left.png" width="20" height="2" />
<img src="right.png" width="27" height="3" />
<div class="content">
Here Goes Content
</div>
</div>
<p />
<div class="bottom_left"><img src="left_bottom_corner.png" width="20" height="27" alt="" /></div>
<div class="bottom size"><img src="bottom.png" width="100%" height="27" alt="" /></div>
<div class="bottom_right"><img src="right_bottom_corner.png" width="27" height="27" alt="" /></div>
</div>

And we then apply the style sheet to the html.
<style type="text/css">
.wraper { position: relative; padding-left: 20px; padding-right: 27px; }
.size { width: 200px; }
.top_left { position: absolute; top: -20px; left: 0px; width: 20px; height: 20px; }
.top { position: absolute; top: -20px; height: 20px; }
.top_right { position: absolute; top: -20px; right: 0px; width: 27px; height: 20px; }
.bottom_left { position: absolute; bottom: -27px; left: 0px; width: 20px; height: 27px; }
.bottom { position: absolute; bottom: -27px; height: 27px; }
.bottom_right { position: absolute; bottom: -27px; right: 0px; width: 27px; height: 27px; }
</style>

You probably have already noticed but the 20px from padding-left and the 27px from padding-right that keep repeating themselves in the CSS are the width of the left and right corners. It is imperative to declare a position to the outmost wrapper as all the corners will be positioned absolutely according to that DIV. You must also leave some space for the lef and right bars of the frame. You can accomplish this by adding some padding to that same DIV.

You’ll now have something like this.







Very nice! Much better than expected! Now we only need to adjust the left and right bars and we’re trough. Notice that I added a background color to the inmost DIV to give you a sense of space.

You can change the inmost DIV properties and the box position by using this CSS classes:
.content { background-color: #0099CC; }
.position { top: 23px; }

We’re almost there. Let us keep going! Now all we have to do is position the left and right borders and then expand the image so that it makes a continuum line. We will position the border with another added class and the image size will have to be hard-coded on the HTML. Of course you can control this through PHP, for example so that you can resize multiple boxes at once. Nevertheless you just have to keep that value high. It will not be noticeable to the user so max-it out high above all expected size. The great thing about this solution is that your box will be virtually infinite.

We add yet another class and we re-define the left and right border size.
.insidePNG_left { position: absolute; left: 0px; }
.insidePNG_right { position: absolute; right: 0px; }

<div class="wraper size position">
<div class="top_left"><img src="left_top_corner.png" width="20" height="20" alt="" /></div>
<div class="top size"><img src="top.png" width="100%" height="20" alt="" /></div>
<div class="top_right"><img src="right_top_corner.png" width="27" height="20" alt="" /></div>
<p />
<div>
<img src="left.png" width="20" height="1000px" class="insidePNG_left" />
<img src="right.png" width="27" height="1000px" class="insidePNG_right" />
<div>
Here Goes Content
</div>
</div>
<p />
<div class="bottom_left"><img src="left_bottom_corner.png" width="20" height="27" alt="" /></div>
<div class="bottom size"><img src="bottom.png" width="100%" height="27" alt="" /></div>
<div class="bottom_right"><img src="right_bottom_corner.png" width="27" height="27" alt="" /></div>
</div>

The result is ok but not yet great. As you can see the borders are now floating away from the container. All we really need is to prevent the border overflow from being seen and we can define that in CSS with overflow:hidden. We have also added a .clear class to both paragraphs in order to keep Internet Explorer happy!


So this would be the final markup.
<head>
<style type="text/css">
.wraper { position: relative; padding-left: 20px; padding-right: 27px; }
.size { width: 200px; }
.top_left { position: absolute; top: -20px; left: 0px; width: 20px; height: 20px; }
.top { position: absolute; top: -20px; height: 20px; }
.top_right { position: absolute; top: -20px; right: 0px; width: 27px; height: 20px; }
.bottom_left { position: absolute; bottom: -27px; left: 0px; width: 20px; height: 27px; }
.bottom { position: absolute; bottom: -27px; height: 27px; }
.bottom_right { position: absolute; bottom: -27px; right: 0px; width: 27px; height: 27px; }
.insidePNG_left { position: absolute; left: 0px; }
.insidePNG_right { position: absolute; right: 0px; }
.innerdiv { position: relative; overflow: hidden; margin-right: -27px; margin-left: -20px; padding-left: 20px; padding-right: 27px; }
.content { background-color: #0099CC; }
.position { top: 23px; }
.clear { font-size: 0; line-height: 0; height: 0; padding: 0; margin: 0; clear: both; }
</style>
</head>
<body>
<div class="wraper size position">
<div class="top_left"><img src="left_top_corner.png" width="20" height="20" alt="" /></div>
<div class="top size"><img src="top.png" width="100%" height="20" alt="" /></div>
<div class="top_right"><img src="right_top_corner.png" width="27" height="20" alt="" /></div>
<p class="clear" />
<div class="innerdiv size">
<img src="left.png" width="20" height="1000px" class="insidePNG_left" />
<img src="right.png" width="27" height="1000px" class="insidePNG_right" />
<div class="content">
Here Goes Content
</div>
</div>
<p class="clear" />
<div class="bottom_left"><img src="left_bottom_corner.png" width="20" height="27" alt="" /></div>
<div class="bottom size"><img src="bottom.png" width="100%" height="27" alt="" /></div>
<div class="bottom_right"><img src="right_bottom_corner.png" width="27" height="27" alt="" /></div>
</div>

Voilà! There we have it. A perfect, fully expandable, box! And even though the markup may be a bit messy, I’m sure this will come in handy very often.

In the specific project I was working, in order to keep the flow clean, I just made this as a PHP function and would inject the code in the markup whenever needed.

You visit http://www.osazeitonas.com and check the box working live.

Download the fully working version here.

See a live preview here.

So you want to learn more? You can always grab a book.

If you are new to CSS and want to get into the detail of it I would recommend "CSS Web Site Design Hands on Training" by Eric Meyer.

If, on the other hand, you're looking to enlighten yourself about CSS and what can be done with it you could visit http://www.csszengarden.com/ or buy "The Zen of CSS Design" by the same author.