RESOLVED CONFIGURATION CHANGED 20807
outline doesn't respect border-radius for styles other than auto
https://bugs.webkit.org/show_bug.cgi?id=20807
Summary outline doesn't respect border-radius for styles other than auto
Beau Hartshorne
Reported 2008-09-12 12:32:53 PDT
The focus ring on text inputs should respect -webkit-border-radius.
Attachments
simple test case (125 bytes, text/html)
2008-09-12 12:33 PDT, Beau Hartshorne
no flags
Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius. (107 bytes, text/plain)
2019-12-09 15:52 PST, Zack
no flags
Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius. (100 bytes, text/html)
2019-12-09 15:54 PST, Zack
no flags
outline with border-radius (250 bytes, text/html)
2022-06-10 16:40 PDT, Bogdan Brinza
no flags
outline-style with border-radius in STP166 (442.31 KB, image/png)
2023-03-27 02:49 PDT, Kristoffer N
no flags
Beau Hartshorne
Comment 1 2008-09-12 12:33:49 PDT
Created attachment 23372 [details] simple test case
Simon Fraser (smfr)
Comment 2 2010-10-07 10:37:34 PDT
The focus ring is implemented as an outline, so bug 25293 may be related.
Zack
Comment 3 2019-11-21 01:47:23 PST
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)
Comment 4 2019-11-21 10:41:57 PST
This works now. Try the test case.
Zack
Comment 5 2019-11-21 10:51:39 PST
Hm, this does not work for me. I'm on FF 70.0.1, what are you on?
Simon Fraser (smfr)
Comment 6 2019-11-21 10:53:31 PST
This is the WebKit bug reporter. I'm testing Safari.
Dean Jackson
Comment 7 2019-11-21 10:55:02 PST
I'm on lynx. I don't see any highlight at all.
Zack
Comment 8 2019-11-21 10:56:05 PST
Whoops, my bad. IDK why I tested FF. Thanks!
Zack
Comment 9 2019-12-09 15:36:23 PST
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)
Comment 10 2019-12-09 15:38:05 PST
Please attach a new testcase.
Zack
Comment 11 2019-12-09 15:52:49 PST
Created attachment 385194 [details] Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius. Added test case.
Zack
Comment 12 2019-12-09 15:53:21 PST
Sorry, this test case was not added correctly, will try again...
Zack
Comment 13 2019-12-09 15:54:42 PST
Created attachment 385195 [details] Attachment demonstrating how user-supplied outline is not affected by -webkit-border-radius. This should work now.
Manuel Rego Casasnovas
Comment 14 2020-04-02 08:57:15 PDT
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
Comment 15 2022-01-21 02:56:37 PST
*** Bug 231433 has been marked as a duplicate of this bug. ***
Anthony Ricaud
Comment 16 2022-01-21 06:39:09 PST
(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
Comment 17 2022-02-08 21:04:53 PST
Jouni Koivuviita
Comment 18 2022-02-10 03:12:38 PST
Can confirm, an outline, with something else than outline-style: auto, does not follow border-radius in Safari Tech Preview 139.
devbugs
Comment 19 2022-02-16 20:10:16 PST
(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
Comment 20 2022-06-10 16:40:13 PDT
Created attachment 460169 [details] outline with border-radius
Bogdan Brinza
Comment 21 2022-06-10 16:42:15 PDT
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.
nv.cloza
Comment 23 2022-07-12 14:30:17 PDT
I've been waiting for 14 years.. will continue to do so.. 🙂
Benoît Rouleau
Comment 24 2022-07-12 14:32:39 PDT
We're in this together, nv.cloza@gmail.com. 🙏
Vadim Makeev
Comment 25 2022-08-23 15:57:20 PDT
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
Comment 26 2022-10-12 15:29:55 PDT
Resolved by the dependent bugs.
Bob Prokop
Comment 27 2022-10-31 09:26:34 PDT
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
Comment 28 2022-10-31 23:39:07 PDT
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
Comment 29 2023-01-17 14:15:18 PST
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)
Comment 30 2023-01-17 14:16:11 PST
This is fixed in STP.
Anthony Ricaud
Comment 31 2023-01-17 14:28:35 PST
Tim Rinkel
Comment 32 2023-01-18 05:27:27 PST
Got it. Thanks!
Kristoffer N
Comment 33 2023-03-27 02:49:48 PDT
Created attachment 465606 [details] outline-style with border-radius in STP166 Safari Technology Preview outline with border-radius do not follow outline-style
zalan
Comment 34 2023-03-27 11:51:10 PDT
(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
Comment 35 2023-04-14 14:30:58 PDT
At Safari's IOS and Chrome's IOS the outline still doesn't respect border-radius
Daniil S.
Comment 36 2023-08-14 06:25:41 PDT
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
Comment 37 2023-08-14 07:35:11 PDT
Daniil S., what version of Safari are you reproducing it in? Definitely works for me in version 16.6.
Note You need to log in before you can comment on or make changes to this bug.