Rounded corners expandable box
This is a text box or a box created with DIV tags that features rounded corners
using one image. The single image technique is taken from Ryan
Thrash. The technique is affectionately called "Thrash Box." It's
a combination of the sliding doors technique, layering, background positioning,
and solid CSS principles. It's made from five DIV boxes that slide apart
from each other as content to added. This is what allows the box to expand
as needed. The background graphic is oversized so the box will always
appear seamless.
My Big Round Box
Here is the desirable "Web 2.0" technique to round the corners of rectagular boxes using a single image. This code creates a box out of a single image. The image is positioned in the background for each DIV. The background is positioned in the upper right corner on the upper right DIV and so forth. The disadvantage of this model is that the background is limited to non-transparent images. Using transparent corners would show the background images under the top layer. The Transparent Rounded Corner Box is the second model as well as the preferred technique because it can be used on any color of background without the need to create a new box graphic. Either way, rounded corners have become a staple in the web design world.
- The container is the bottom right corner.
- The head DIV is the upper left corner.
- The header tag is the upper right corner.
- The body DIV is the bottom left corner.
HTML
code
Javascript
code