Re: outline-radius

On Mar 12, 2012, at 6:54 AM, Antony Kennedy <antony@silversquid.com> wrote:

> We've recently run into a situation with the same requirement. 
> 
> ++
> 
> Sent from my iPhone 5
> 
> On 12 Mar 2012, at 13:38, Paul Bakaus <pbakaus@zynga.com> wrote:
> 
>> Hi everyone,
>> 
>> This is a request for outline-radius, the equivalent to border-radius for outline. Particularly in web apps featuring sorting and/or drag & drop, outlines are god-sent as they don't modify layout – so in order to mark something as a drop target while dragging on top of it, outlines are invaluable to not cause any harm to the layout but highlight the target.
>> 
>> Rounded corners are a commonly used feature nowadays, but outlines around them look bad as they're always rectangular. Thus, I think we should bring in outline radius as logical extension. The other option would be to get rid of border radius in favor of something more generic (element-radius?) implicitly reflecting on border and outline.
>> 
>> What do you think?

I think it should be automatic. The 'border' of 'border-radius' doesn't mean that it only affects the border. It just means that the border box is where you measure the radius. It also affects the radius of the padding box and content box, and should also affect the outline. Currently it is undefined, and UAs are not required to curve the corners of the outline when there is a positive border-radius, but in my view they really aught to be, because it always looks horrible to have square corners on the outline when there are curved corners on the element. Outlines should have outside outline radii equal to border-radius + outline-width + outline-offset.

It might also be useful at times to have a separate 'outline-radius', specifically for when there is a 'border-radius:0' and you want an outline-radius to be less than outline-width + outline-offset, but that seems less important to me.