Re: outline-radius

In general, indeed, it would be nice to have ability to round corners of outline similar to currently available rounding corners of element with border-radius.

However maybe it makes sense to get rid of outline itself in its current form, and make generalize and improve borders by making it possible to:

    * specify _multiple_ borders for same element;
    * specify whether particular border "layer" should affect element size.

A possible multiple-borders syntax is simple (comma-separated list of regular border values):

    .example {border: 1px solid #ссс, 2px solid #0a0; }

Whether border "layer" should affect element size, could be specified by property like border-affect-size:

    .example {border-affect-size: affect, none; }

Here, first border (1px solid #ссс) do affect element size while second border is rendered, but does not affect element size (effectively behaving as outline).

By affecting element size, I mean whether visible size of element (together with particular border layer) is identical to size of element's area affecting positions of its sibling elements. For example, currently, border do affect element size while outline does not.

FWIW: Rendering of outline is currently inconsistent in Firefox and other browsers. See testcase:

http://tanalin.com/_experimentz/bugs/fx/2012/box-shadow-outline/

I'm not sure this is a bug or feature of Firefox, but, in fact, Firefox currently includes box-shadow in outlined area while other browsers do not. Difference is huge, and it directly affects cases where rounding outline corners could be used, so this probably should be taken into account in this topic.

Thanks.


12.03.2012, 17:38, "Paul Bakaus" <pbakaus@zynga.com>:
> 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?
> Thanks,
> Paul

Received on Monday, 12 March 2012 19:32:40 UTC