Discover the Secrets of CSS

Although you can add rounded corners to divs using JavaScript (see the sidebar “Creating Rounded Corners with JavaScript”), I will now show you how to create rounded boxes with artwork. Creating a box with a fixed size is as simple as making the artwork and adding it to the page, but the trick is to create such boxes so that they expand to accommodate whatever content is chucked into them. If you want a fixed-width graphical box to expand vertically (which is what I want here), the easiest way is to create three pieces of artwork that go into the background of three containing elements.

How this actually works is easier to demonstrate than explain, so let’s start by looking at the artwork. Here are three pieces of artwork I need: the top graphic with the curved top edge of the box, the middle graphic that repeats as many times as needed to fi ll the center of the box, and the bottom graphic with the curved bottom of the box.