Tips & Tricks - Rounded boxes and unsharp shadows

Rounded corners and shadowed boxes

CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up.

This page was inspired by one created by Arve Bersvendsen. He has many more interesting CSS demos.

Of course, rounded borders and shadows will be much simpler with CSS3. For example, to give a paragraph a thick red border with rounded corners, you would need just two lines of CSS3 similar to this:

P { border: solid thick red;
    border-radius: 1em }

And to add a blurry drop shadow half an em below and to the right of the paragraph, just one line would be enough:

P { box-shadow: black 0.5em 0.5em 0.3em }

(You can try here if it works already.) But if you need them now and you don't mind the complexity and lack of flexibility, you can use the technique below. At the very least it will be a nice test for buggy browsers…

Five images on one element

The main trick is to use generated content ('::before' and '::after') to put four extra images on an element. The '::before' pseudo-element can have a background and a foreground image, the '::after' pseudo-element also, and the element itself can have a background, for a total of five images.

We create five PNG images and put them in the four corners and against the right edge of the element. Here are the images:

top left corner:

top edge and top right corner:

middle part and right edge:

bottom left corner:

bottom edge and bottom right corner:

And here are the CSS rules to position them:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Since our background image is 620px wide, we can't allow boxes wider than 620px, without getting gaps. That's why the 'max-width' property is there. The 'display: block' property is needed to make sure the generated content forms boxes of its own above and below the main content, instead of being inserted on the first and last line. The 'line-height: 0' makes sure there is no room for left open for ascenders and descenders above and below the images in the 'content' property.

The result

And here is how it looks:

Do you see a pale green box with rounded corners and a drop shadow against a white background? If not, your browser isn't handling the generated content correctly (or maybe not at all).

The HTML source is really no more than it should be:

<blockquote>
<p>Do you see a pale green box with rounded corners
and a drop shadow against a white background? If not,
your browser isn't handling the generated content
correctly (or maybe not at all).
</blockquote>

And if you want to test if your browser can already do this the CSS3-way, you can try it here.