W3C home > Mailing lists > Public > www-style@w3.org > March 2012

Re: outline-radius

From: Brad Kemper <brad.kemper@gmail.com>
Date: Mon, 12 Mar 2012 15:01:49 -0700
Message-Id: <F2843420-988B-446E-B403-B05B8C306240@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>
To: Boris Zbarsky <bzbarsky@MIT.EDU>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:48:51 GMT