Rounded corners and shadowed boxes

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

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

Of course, rounded borders and shadows are much simpler with CSS3 than with CSS2. For example, to give a paragraph a thick red border with rounded corners, you 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 and here if it works already.) But if you need them in older browsers 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 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>

Site navigation

Created 6 January 2004;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

About the translations

Web Style Sheets CSS tips & tricks