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

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).