Tips and workarounds

Creating boxes with rounded corners

Rounded corners should really be available in CSS shouldn't they. But they are not. There is a long standing spec for the next version of CSS to include a property called border-radius but that is some time in the future. I have seen myriad ways of creating rounded corners in HTML but the method I am going to show here is robust and reliable. If it sounds like a Delia Smith recipe for Yorkshire Pudding, the simile is not far off.

The Gorilla Guide round-cornered box solution in action

This rounded corners technique has several things in its favour;

Works reliably with all current major browsers
Can be easily added to existing pages
It's pretty simple
You don't even have to work out why it works. Just cut and paste

This solution shows you how to create a basic but reusable rounded corner box like the example shown to the right. Alternatively, you can just jump ahead to the HTML and stylesheet script.

First use an image editor to create a rounded corner graphic like this. You will need to rotate this through 90° three times and save it each time in order to create all four corners. Don't forget to make a note of the colour value that you use. Name each image file tl.xxx (for top-left), tr, bl, br.

In order for the corner images to appear without interfering with the content of the box they must be set as background images of a <div>. Of course, there can only be one image set as a background to an element, so four <div> elements should be created that nest one inside the other, each with a corner as the background. Give each element a class name. your XHTML script will look something like this -

	<div class='bl'><div class='br'><div class='tl'><div class='tr'>

		<p>Some box content here</p>
	
	</div></div></div></div>

And your CSS style should look like something like this -

	div.bl { background: url('bl.gif') bottom left no-repeat #FF024B; }
	div.br { background: url('br.gif') bottom right no-repeat; }
	div.tl { background: url('tl.gif') top left no-repeat; }
	div.tr { background: url('tr.gif') top right no-repeat; 
		min-height: 120px; padding: 15px 5px;}

The outermost box div.bl has been given a colour value of #FF024B that will fill in the body of the box to match the corners. Notice that I have added a minimum height and some padding to the innermost box div.tr.

So far, so good. However, values have not been set for the border and margin of each box, so any browser rendering it will set whatever default values it likes. Further more, the box width hasn't been set, so the box will render as wide as the containing elements will allow. The solution is to create an outer container for all the boxes to go in and then set the width, margin and border for the new container. I have called the containing class roundcorners. While we are at it, some positional information can be added to the container. I have floated it to the right and set a margin to keep adjacent objects at bay. As a final touch, I am going to set some text properties for any <p> elements contained in the box.

Here is what the finished XHTML looks like -

<p>Some box content here</p>

</div></div></div></div>
</div>

and the stylesheet looks like this -

/* Set the positional and width properties for the roundcorners container */
div.roundcorners { float: right; width: 300px; padding: 0; margin: 1em 2em; }

/* Ensure all divs inside the roundcorners container have margins and padding zeroed */
div.roundcorners div { padding: 0; margin: 0; }

/* Define the corner image for each nested box */
div.roundcorners div.bl { background: url('bl.gif') bottom left no-repeat #FF024B; }
div.roundcorners div.br { background: url('br.gif') bottom right no-repeat; }
div.roundcorners div.tl { background: url('tl.gif') top left no-repeat; }

/* ...not forgetting to set a minimum height for the innermost box. Also add padding around
any contents. */
div.roundcorners div.tr { background: url('tr.gif') top right no-repeat;
min-height: 120px; padding: 15px 5px;}

NB. If you wish to make the roundcorners class reusable, the example specific positional information in the roundcorners container should be removed. The first line in the CSS will then look like this;

div.roundcorners { padding: 0; margin: 0; }

When you embed roundcorners into any page, a further div should be placed around it to position the object as needed.

Feel free to cut and paste the script in this solution to your hearts content.

Should you feel a pressing need to contact me about this solution, please use the Contact page and write 'Creating boxes with rounded corners' at the top of your message.

▲ top