Open Bug 315209 Opened 15 years ago Updated 6 months ago
outline should follow shape of border-radius (remove -moz-outline-radius)
232 bytes, text/html
12.81 KB, image/png
47 bytes, text/x-phabricator-request
|Details | Review|
3.76 KB, text/html
User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051025 Firefox/1.5 Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051025 Firefox/1.5 It seems that if a box has a border radius (for rounding the corners) that if an outline is applied to the same box, the outline does not follow the defined radius. Resulting in a round-edged box with an outline that is rectangular. Not sure if this is a CSS-spec bug (W3C), or a rendering bug (Moz). On the example URL given - mouse over the main boxes on the page to see the effect. Reproducible: Always Steps to Reproduce: 1. Visit example URL 2. Mouse over the main white boxes on the page 3. Brown coloured outline should appear around the rounded edged boxes (border-radius) Actual Results: Outline does not follow border-radius. Expected Results: Outline should follow border-radius. (? or should it ?) Other browsers: Opera 8 doesn't support radius anyway, Safari 2.0.2 doesn't support radius, IE doesn't support [anything] radius - so not much to compare it with really. I suppose this is CSS3 related, although obviously the -moz-border-radius CSS extension also demonstrates the problem.
You can use -moz-outline-radius to get rounded outline borders.
(In reply to comment #1) > You can use -moz-outline-radius to get rounded outline borders. > Hmmm... ok, so that's the mozilla extension. So it's possible to achieve it. But should the outline follow the border shape if defined?
I think CSS allows this, see http://www.w3.org/TR/css3-ui/#outline1 > Outlines may be non-rectangular.
Severity: normal → enhancement
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Mac OS X → All
Summary: CSS: radius defined box edges and outline combination - outline not following radius 'shape' → outline should follow shape of border-radius
Outlines should follow border-radius like box-shadow.
(In reply to Daniel.S (mostly offline during the week) from comment #3) > I think CSS allows this, see http://www.w3.org/TR/css3-ui/#outline1 > > > Outlines may be non-rectangular. That sentence is longer in CSS2, see http://www.w3.org/TR/CSS2/ui.html#propdef-outline : > Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. In contrast to borders, the outline is not open at the line box's end or start, but is always fully connected if possible. I read this not as "outlines can be rounded, while borders can't", which is obviously false (the idea of the issue is that the outline should be rounded like the border), but that the outline follows the element's real shape closer, especially valid for inline elements spread over several lines.
see also bug 593717
Summary: outline should follow shape of border-radius → outline should follow shape of border-radius (remove -moz-outline-radius)
Posted the site compatibility doc: https://www.fxsitecompat.com/en-US/docs/2015/moz-outline-radius-will-be-removed/
CSS3 UI requires this behavior: https://www.w3.org/TR/css-ui-3/#ref-for-border-edge "To the extent that the outline follows the border edge, it should follow the border-radius curve." Updated URL accordingly. Old "URL" in this bug (http://www.kollektive.com/prodsandservs.asp) appears to be offline.
Whiteboard: [layout:backlog:quality] → [layout:backlog:quality] [lang=c++] [good-first-bug]
Whiteboard: [layout:backlog:quality] [lang=c++] [good-first-bug] → [layout:backlog:quality] [lang=c++]
Assignee: nobody → wjohnston2000
Status: NEW → ASSIGNED
You need to log in before you can comment on or make changes to this bug.