Re: outline-radius

On Mar 12, 2012, at 9:41 AM, Boris Zbarsky <bzbarsky@MIT.EDU> wrote:

> On 3/12/12 11:26 AM, Brad Kemper wrote:
>> Can you give some examples of non-rectangular outlines
> 
> <span style="outline: 2px solid black">This is<br>some text that is longer on the second line<br>and has a third line</span>
> 
> Load that in Opera or any WebKit-based browser.  Gecko gets this wrong at the moment, sadly.

I see. I would expect that to look like the following does in webkit (I was using safari's snippet editor to view it, if that matters):

<span style="border-radius:.5em; background:white; box-shadow:0 0  0 1px black">This is<br>some text that is longer on the second line<br>and has a third line</span>

Or, if you want to see it with line boxes that overlap due to span padding or negative line-height, paste this into webkit:

<div style="position:relative; line-height:26px; font-size:24px;"><span style="border-radius:.6em; padding:3px; background:white;">This is<br>some text that is longer on the second line<br>and has a third line</span><div style="position:absolute; left:0; top:0; z-index:-1; "><span style="border-radius:.6em; padding:3px; background:white; box-shadow:0 0  0 1px black">This is<br>some text that is longer on the second line<br>and has a third line</span></div></div>

Received on Monday, 12 March 2012 22:02:25 UTC