border-radius; overflow: hidden, and text is not clipped

Question

I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.

Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.

This is mostly visible in Firefox 3.x and older versions of Chrome

Here's the sample code to play with:

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

the jank:

Notice it's been fixed in the new Chrome and FireFox 4 - the shui:

Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers

Answer 1

This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/

It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.

I just added a span:

<div><span></span>WXYZ</div>

and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:

div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */       
}

edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!

In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).