WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
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
Details
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
Details
outline with border-radius
(250 bytes, text/html)
2022-06-10 16:40 PDT
,
Bogdan Brinza
no flags
Details
outline-style with border-radius in STP166
(442.31 KB, image/png)
2023-03-27 02:49 PDT
,
Kristoffer N
no flags
Details
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
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
<
rdar://problem/88669393
>
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.
Bogdan Brinza
Comment 22
2022-06-10 16:49:35 PDT
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
)
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
This was fixed in STP 157 :
https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
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.
Top of Page
Format For Printing
XML
Clone This Bug