Bug 231433

Summary:	outline rendering does not respect border-radius
Product:	WebKit	Reporter:	Luca Casonato <hello>
Component:	Layout and Rendering	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	bfulgham, blasterkat101+bugzilla, jdanyow, lwarlow, rego, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Safari Technology Preview
Hardware:	Mac (Apple Silicon)
OS:	macOS 11
See Also:	https://bugs.webkit.org/show_bug.cgi?id=175288 https://bugs.webkit.org/show_bug.cgi?id=20807

Description Luca Casonato 2021-10-08 08:48:24 PDT

In Safari, the outline rendered as a result of the `outline` CSS property does not respect the border radius set by the `border-radius` property. In both Chrome and Firefox, this combination works correctly.

There is a WPT reftest that checks this behaviour: https://wpt.live/css/css-ui/outline-005.html. See https://wpt.fyi/results/css/css-ui/outline-005.html?label=master&label=experimental&aligned

There is also a WebKit bug for some general test failures regarding outline (https://bugs.webkit.org/show_bug.cgi?id=175288), but this failure specifically is rather severe so deserves it's own tracking bug I think.

Comment 1 Radar WebKit Bug Importer 2021-10-15 08:49:15 PDT

<rdar://problem/84303593>

Comment 2 blasterkat101+bugzilla 2021-12-02 03:54:58 PST

I'm having this issue on Safari Version 15.1 (16612.2.9.1.30, 16612).

I reproduced it in this fiddle:

https://jsfiddle.net/zvmu5p0a/1/

In Chrome and Firefox the outline follows the border-radius, but not in Safari.

Comment 3 Manuel Rego Casasnovas 2022-01-21 02:56:37 PST


*** This bug has been marked as a duplicate of bug 20807 ***