Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "outline follows border-radius" #6099

Open
1jj opened this issue Dec 3, 2021 · 6 comments
Open

Add "outline follows border-radius" #6099

1jj opened this issue Dec 3, 2021 · 6 comments

Comments

@1jj
Copy link

1jj commented Dec 3, 2021

Recently (I don't know when) at least Firefox and Chromium changed implementation of CSS outline when a border-radius is present.
Previously the outline was always rectangular.
Now the outline follows a border-radius (with or without a border set).

"outline follows border-radius" works with Chrome 94 and Firefox 94,
don't work with Chrome 77 and Firefox 68 (sorry, don't have other data)

 <div style="outline:solid red; border-radius:1em">
      this should have a red border with rounded corners
 </div>
@mayank99
Copy link

mayank99 commented Jan 5, 2022

Fwiw, this was added in Firefox 88 1 and Chromium 94 1, 2

@Schweinepriester
Copy link
Contributor

Spec: https://www.w3.org/TR/css-ui-3/#ref-for-border-edge
As evidenced here:

Safari:

MDN put this aspect directly into the main thing (outline) with notes:

So technically it's covered already ]:->

But we probably should either track it separately and link to it from https://caniuse.com/outline or do it like MDN.
I would suggest and prefer (only!) one note on all versions of Chromium, Firefox and Safari which don't support it, pretty close to note 4 from MDN

outline does not follow the shape of border-radius. See bug 231433.

so only the past (and for the time being Safari) gets cluttered up.
I could do the PR.
What do you think, @Fyrd?

@kylemh
Copy link

kylemh commented Jul 27, 2022

What about changing all of Safari to Partial Support on outline? Historically, caniuse has used partial when an implementation has many bugs or important problems to be aware of. It's a big problem, so maybe that's enough to justify it?

I'd also update the bug link since the referenced one was marked by a duplicate. The correct webkit bug link: https://bugs.webkit.org/show_bug.cgi?id=20807

@cpmsmith
Copy link

What about changing all of Safari to Partial Support on outline?

I've opened a PR on mdn/browser-compat-data to do just this—I guess that would filter over to Caniuse if it's merged, though I don't know what the strategy around this is for data which is duplicated between MDN data and Caniuse data.

queengooborg pushed a commit to mdn/browser-compat-data that referenced this issue Oct 31, 2022
…on (#17598)

* Consider `outline` not following border-radius a partial implementation

Related to #12760, Fyrd/caniuse#6099

* Add `version_removed` to since-completed partial implementations
@Schweinepriester
Copy link
Contributor

Safari 16.4 (beta) via https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes:

Added support for outline following the curve of border-radius.

@cyraid
Copy link

cyraid commented Jul 26, 2023

Is there a way to detect with css that it will follow the border outline? Like a @supports perhaps? So you could detect if it would follow and style accordingly? Otherwise fallback on box-shadow?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants