Add "outline follows border-radius"

[1jj]

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]

Fwiw, this was added in Firefox 88 ¹ and Chromium 94 ^{1, 2}

[Schweinepriester]

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

• https://bugzilla.mozilla.org/show_bug.cgi?id=315209#c11
• https://bugs.chromium.org/p/chromium/issues/detail?id=81556#c21
• https://bugs.chromium.org/p/chromium/issues/detail?id=81556#c30

Safari:

• https://bugs.webkit.org/show_bug.cgi?id=20807
• or rather https://bugs.webkit.org/show_bug.cgi?id=231433

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/outline#browser_compatibility
• https://caniuse.com/mdn-css_properties_outline

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]

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]

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.

[Schweinepriester]

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]

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?