CSS Outline Doesn't Follow border-radius |
||
Issue descriptionChrome Version: 73.0.3672.0 (Windows) Repro: https://jsfiddle.net/qh2n0k1v/ HTML: <span class="rounded">Rounded Span</span> CSS: .rounded { background: #99f; border: 0; border-radius: 3px; outline: 3px solid red; padding: 5px; } EXPECTED: The outline should follow the border radius. ACTUAL: The outline remains rectangular. (See attached image) Citation: https://www.w3.org/TR/css-ui-3/#propdef-outline The parts of the outline are not required to be rectangular. To the extent that the outline follows the border edge, it should follow the border-radius curve.
,
Jan 21
(2 days ago)
Should we try to fix this in NG?
,
Yesterday
(47 hours ago)
I think it is a lost cause with multiple rectangles, too many strange joins. It might be doable for a simple case: single div being outlined. Would fixing it only for a "single div" case be useful at all?
,
Today
(12 hours ago)
I'd suspect the single block with a border-radius is the common case and would go a long way to avoiding the need to have a box-shadow workaround.
,
Today
(7 hours ago)
@robliao: Could you tell me a bit more about your use case? My concern is inconsistency. If we special case single block, outline would change "unpredictably" for web authors. If there is a usable workaround (boder-shadow?), it'd be better if everyone just used that.
,
Today
(6 hours ago)
I'm just trying to add an outline to a rounded button. box-shadow is a hack to work around the fact that outline doesn't follow the the border-edge and requires you to specify some relatively degenerate CSS (box-shadow: 0 0 0 1px [color]) Since the spec says it should follow the border, it sounds like it should work at least for the simple case. |
||
►
Sign in to add a comment |
||
Comment 1 by robliao@chromium.org
, Jan 18 (5 days ago)