Previous Message
Next Message

Rounded corners and Transparent GIFs

Sent by Michael Clayton on 23 March 2006 18:06

For my next trick, I'll need a div with rounded corners on top of a
textured background.  Any volunteers from the audience?

My launch pad was this ALA article:

I was skeptical about this being possible at all, but here is my
stubborn progress:

The div must be elastic horizontally and vertically.  The problem is
that the when the corner images overlap, the transparent corners are
blocked out, leaving a rectangular corner.  Try shrinking the text and
watching what happens to the bottom left corner.

Here is a shortcut to the ALA article's explanation of how the images
are sliced:

This would be very easy to arrange with tables, but that would be
embarassing.  I've been trying to place one horizontal and one
veritcal box with white backgrounds behind the main div, but have been
so far unsuccessful.  Here's a quick mockup:

I just want a nice clean box with rounded, transparent corners.  All
that I have found so far has been pain!

Michael Clayton
css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: