What I've done in the past, when I've wanted to add rounded corners,
gradients, or other complex effects to tabs or headers, is to specify
the background as a top-aligned image with the
corner/gradient/what-have-you effects, and to then specify the
background color, on top of that, as the same color as the bottom of
the image. The image itself shows the effects, and the background
color accounts for any overflow.

On 10/31/05, Wolfgang S. Rupprecht
<wolfgang+gnus200510@dailyplanet.dontspam.wsrcc.com> wrote:
>
> Alan Post <apost@recalcitrant.org> writes:
> > Using galeon 1.2.14:
> >
> > If one increases the font size, the header text gets its bottom cut
> > off.
>
> I think this will happen with any browser.  The orange header
> highlighting is done with a *.png (which doesn't scale with the font).
>
> One way that scales would be to have a section (perhaps a "div") with
> "background-color: orange" and let the xhtml engine fill in the color.
>
> The downside of pure xhtml rendering is that you do lose the ability
> to make a rounded corner.  There are some hacks to do this too
> involving cutting the background picture up into repeating and
> non-repeating sub parts.
>
>    http://www.sovavsiti.cz/css/corners.html
>
> (Personally, I'm not sure rounded corners add enough eye appeal to
> justify all this work.  I just wanted to point out that if rounded
> corners were really desired, it would be possible to do them in a more
> resolution-independent way.)
>
> -wolfgang
>