The focus ring on text inputs should respect -webkit-border-radius.
Created attachment 23372 [details] simple test case
The focus ring is implemented as an outline, so bug 25293 may be related.
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?
This works now. Try the test case.
Hm, this does not work for me. I'm on FF 70.0.1, what are you on?
This is the WebKit bug reporter. I'm testing Safari.
I'm on lynx. I don't see any highlight at all.
Whoops, my bad. IDK why I tested FF. Thanks!
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.
Please attach a new testcase.
Created attachment 385194 [details] Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius. Added test case.
Sorry, this test case was not added correctly, will try again...
Created attachment 385195 [details] Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius. This should work now.
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."
*** Bug 231433 has been marked as a duplicate of this bug. ***
(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.
<rdar://problem/88669393>
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.
Created attachment 460169 [details] outline with border-radius
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.
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.. 🙂
We're in this together, nv.cloza@gmail.com. 🙏
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.
Resolved by the dependent bugs.
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!
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.
Any progress on this? I haven't seen it in any Safari versions yet. CanIUse still lists it as a bug for TP.
This is fixed in STP.
This was fixed in STP 157 : https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
Got it. Thanks!
Created attachment 465606 [details] outline-style with border-radius in STP166 Safari Technology Preview outline with border-radius do not follow outline-style
(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.
At Safari's IOS and Chrome's IOS the outline still doesn't respect border-radius
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.
Daniil S., what version of Safari are you reproducing it in? Definitely works for me in version 16.6.