Creating an Outlined, Rounded-Corner Box Using CSS

On a Web project I'm currently working on, I created rounded-corner boxes with outlines. At first I couldn't find any tutorials on this to get an idea of how to start. I played with the idea for a couple of hours and came up with what I have pictured to the left.

This is a fixed-width box, so the height is elastic. I started measuring the width I needed. In this sample the width is 250 pixels. From there I created two images in Photoshop for the top and bottom of the box and saving them as pngs to keep the transparency.

After that, I constructed my HTML. I used a table to contain the box. The table has 3 rows and 1 column like this:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Then I created my styles for the top and bottom of the box and the inside of the box.

.top250x14 { background-image: url(images/250x14Top.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.bottom250x14 { background-image: url(images/250x14Bottom.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.boxColors { border-left: 1px solid #cfcf99; border-right: 1px solid #cfcf99; background-color: #fff; }

.sidebarBox { width: 247px; padding: 0; }

The classes top250x14 and bottom250x14 are for the top and bottom images of the box. The class boxColors creates the left and right borders of the box and gives the box a white background color. The sidebarBox class gives the width for the inside of the box with considering the left and right border widths. I'm not sure about the one pixel that is left over from the sidebarBox class. It needed one less pixel in order to align with the top and bottom box images correctly.

Now let's put it all together:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="top250x14"></td>
</tr>
<tr>
<td>
<div class="boxColors sidebarBox">
<h3>Sample Box</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pretium turpis sed nisi. Sed condimentum metus eu nibh. Suspendisse vitae tellus sit amet pede placerat malesuada. Ut non libero nec nibh hendrerit pretium. Integer neque. Duis purus risus, scelerisque vitae, dignissim nec, sodales semper, metus.</p>
</div>
</td>
</tr>
<tr>
<td class="bottom250x14"></td>
</tr>
</table>

Download the files used:
outlinedrounded.zip