Rounded Box Example

This is an example of the dynamic rounded box. As you can see a border with rounded corners has been added. This is dynamic and will flow with the size of the box.

There are 4 elements at work here. The container that holds the entire box, and "h2" tag, a div that holds the body text, and a paragraph inside of there. The last paragraph must be given a class name of "last", and any other paragraph will display only the left border. All margin's inside of the box have been removed due to browser bugs, except one, for the right side of the header, to simulate padding.

The background effect is created using only one large image, (rounded.png) which is then applied to the background of the above mentioned elements, then aligned to the four corners of the box. You just need to make sure that the image is larger than any box you use it for would ever be.

View the source to see the code.