Bug 20807 – outline doesn't respect border-radius for styles other than auto

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Beau Hartshorne]

The focus ring on text inputs should respect -webkit-border-radius.

[Beau Hartshorne]

Created attachment 23372 [details]
simple test case

[Simon Fraser (smfr)]

The focus ring is implemented as an outline, so bug 25293 may be related.

[Zack]

Wondering what the status of this bug is? My team is evaluating a potential UI design, and our decision is partially based on when this fix would land. Is there a particular release the WebKit team is aiming for?

[Simon Fraser (smfr)]

This works now. Try the test case.

[Zack]

Hm, this does not work for me. I'm on FF 70.0.1, what are you on?

[Simon Fraser (smfr)]

This is the WebKit bug reporter. I'm testing Safari.

[Dean Jackson]

I'm on lynx. I don't see any highlight at all.

[Zack]

Whoops, my bad. IDK why I tested FF. Thanks!

[Zack]

This bug is actually NOT fixed.

Add { outline: 3px solid red; } to the demo case above. It looks like only the system outline follows border-radius. User-supplied outlines do not.

[Simon Fraser (smfr)]

Please attach a new testcase.

[Zack]

Created attachment 385194 [details]
Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius.

Added test case.

[Zack]

Sorry, this test case was not added correctly, will try again...

[Zack]

Created attachment 385195 [details]
Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius.

This should work now.

[Manuel Rego Casasnovas]

It seems this was fixed when "outline-style" is "auto", but not if it's "solid" or something else.

Example where the outline line (the magenta line) is rounded using "outline-style: auto":
  data:text/html,<style>div{outline: auto thick magenta; border: solid thick cyan; width: 200px; height: 200px; border-radius: 50px;}</style><div></div>

Example where the outline line (the magenta line) is not rounded using "outline-style: solid":
  data:text/html,<style>div{outline: solid thick magenta; border: solid thick cyan; width: 200px; height: 200px; border-radius: 50px;}</style><div></div>

From the spec point of view this is not mandatory though (https://drafts.csswg.org/css-ui/#outline-props): "it should follow the border-radius curve."

[Manuel Rego Casasnovas]

*** Bug 231433 has been marked as a duplicate of this bug. ***

[Anthony Ricaud]

(In reply to Manuel Rego Casasnovas from comment #14)
> It seems this was fixed when "outline-style" is "auto", but not if it's
> "solid" or something else.
> 
> Example where the outline line (the magenta line) is rounded using
> "outline-style: auto":
>   data:text/html,<style>div{outline: auto thick magenta; border: solid thick
> cyan; width: 200px; height: 200px; border-radius: 50px;}</style><div></div>

I don't see it fixed on either Safari 15.2 or STP 138 on macOS 12.1. When using outline-style: auto, the outline gets the OS accent colour.

[Radar WebKit Bug Importer]

<rdar://problem/88669393>

[Jouni Koivuviita]

Can confirm, an outline, with something else than outline-style: auto, does not follow border-radius in Safari Tech Preview 139.

(In reply to Anthony Ricaud from comment #16)
> (In reply to Manuel Rego Casasnovas from comment #14)
Can confirm on Safari 15.2

outline-style: solid; ===> outline doesn't respect border-radius.

outline-style: auto; ===> respects border-radius, but ignores outline-color and related properties such as width and offset.

[Bogdan Brinza]

Created attachment 460169 [details]
outline with border-radius

[Bogdan Brinza]

Existing test cases cover input elements and I wanted to add the case that's just HTML.

Seems like https://drafts.csswg.org/css-ui/#outline has this specified: "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."

The attached outline-border-radius.html shows expected behavior in Chrome, Firefox.

[Bogdan Brinza]

Seems like that's tested by https://github.com/web-platform-tests/wpt/blob/master/css/css-ui/outline-005.html (https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=css-ui%2Foutline-005.html)

I've been waiting for 14 years.. will continue to do so.. 🙂

[Benoît Rouleau]

We're in this together, [e-mail]. 🙏

[Vadim Makeev]

I’d love to see it fixed. Otherwise, people often use box-shadow to achieve the same effect. Unfortunately, it makes such an outline not accessible in high-contrast mode.

[Myles C. Maxfield]

Resolved by the dependent bugs.

[Bob Prokop]

Can someone please provide an update on the status of this ticket? Currently it has status of "RESOLVED CONFIGURATION CHANGED" -- but does that now mean Safari will behave as other modern browsers and honor border-radius even if color, style, and offset are also declared? The last comment from Myles C. Maxfield reads "Resolved by the dependent bugs." Please clarify. Is it safe to use this commonly utilized set of rules in Safari now or do we have to continue to use inefficient "hacks" like border still? Thank you!

[Karl Dubost]

Bob,

This has been fixed in WebKit, see Bug 246192 on 2022-10-08
with this commit https://github.com/WebKit/WebKit/commit/acd85199c2bdd7af48d46daf78c834e75930b867

Watch out for future versions of Safari Technical Preview and tell us if it fixed the issue as you think it should.

[Tim Rinkel]

Any progress on this? I haven't seen it in any Safari versions yet. CanIUse still lists it as a bug for TP.

[Simon Fraser (smfr)]

This is fixed in STP.

[Anthony Ricaud]

This was fixed in STP 157 : https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/

[Tim Rinkel]

Got it. Thanks!

[Kristoffer N]

Created attachment 465606 [details]
outline-style with border-radius in STP166

Safari Technology Preview outline with border-radius do not follow outline-style

[alan]

(In reply to Kristoffer N from comment #33)
> Created attachment 465606 [details]
> outline-style with border-radius in STP166
> 
> Safari Technology Preview outline with border-radius do not follow
> outline-style
Thanks. It was addressed in 261962@main.

[Rebecca]

At Safari's IOS and Chrome's IOS the outline still doesn't respect border-radius

[Daniil S.]

Still no respect for border-radius with user-provided styles. All attachments except default outline styles still fail. Please, change status of the bug as it's confusing.

[Benoît Rouleau]

Daniil S., what version of Safari are you reproducing it in? Definitely works for me in version 16.6.