outline border-radius

Hey folks! I just watched Kevin's video about outlines and borders (https://www.youtube.com/watch?v=xx_pJ2ouGnc&t=246s) and was surprised about the section about how outlines don't respect the border-radius of the element. I seem to remember that was a limitation and the video is from 2 years ago, so perhaps (at least chrome) has added support for outlines in the meantime to respect the given border-radius because it works now.
I wasn't sure how to look up the browser support for this though. Caniuse.com doesn't have anything specific to this. The MDN outline page (https://developer.mozilla.org/en-US/docs/Web/CSS/outline) mentions that border-radius should work, but doesn't mention anything about browser support. Does anyone have any insight about using outline in conjunction with border-radius and the browser support for it?
12 Replies
capt_uhu
capt_uhu14mo ago
There's this from a couple of years ago in the css working group github that links to webkit and chome bugs but it's from 2020: https://github.com/w3c/csswg-drafts/issues/4671#issuecomment-610187097
GitHub
[css-ui-3] Should outline-style:auto follow border-radius curve? · ...
Should outline-style:auto follow border-radius curve? https://drafts.csswg.org/css-ui-3/#outline-props If not, should there be spec language that says following border-radius curve should only appl...
MarkBoots
MarkBoots14mo ago
I don't think it's a mayor issue anymore. But, if you can avoid using outline for design purposes, I do recommend to let it untouched
ἔρως
ἔρως14mo ago
yes, what markboots said however, i disagree with the urgency he used if you mess with the outline, and you care a tiny tiny bit about impaired users, then you should make absolutely sure that it does what's expected when an used presses tab or ... just avoid it completely for design elements and simply set the outline color to something that contrasts well with the elements around
capt_uhu
capt_uhu14mo ago
looks like safari just fixed this in March 2023 with 16.4: https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
Mike
MikeOP14mo ago
The problem I'm facing with our designer is that figma is set to use "stroke alignment" of "inside", which is not how borders work in CSS. Additionally, the regular border is 1px, and the focus/error borders are 2px, which would cause layout shift using border when going between the two. So my solution was to use outline instead of border which prevents the layout shift. But now I'm concerned about the browser support... But I suppose the impact of not seeing a border radius on an old browser is pretty low.
capt_uhu
capt_uhu14mo ago
the MDN compatibility table has notes about outline and border radius you just have to click to show it: https://developer.mozilla.org/en-US/docs/Web/CSS/outline#browser_compatibility
No description
capt_uhu
capt_uhu14mo ago
take a look at box-shadow it can be inset or outset (the default) and does not effect layout.
Mike
MikeOP14mo ago
oh wow, I didn't know that was there, thanks @jsnkuhn !
ἔρως
ἔρως14mo ago
you can use the amazing caniuse website
capt_uhu
capt_uhu14mo ago
yep, yep, but the problem in this case is that the first hits on caniuse are usually the "caniuse" made listings from before they started importing the much more detailed MDN info. There's a check box at the top of caniuse that lets you see only MDN hits. Personally I prefer to do that.
ἔρως
ἔρως13mo ago
thats a good point
Mike
MikeOP13mo ago
oh yeah, weird. caniuse doesn't show the border-radius details unless you only have MDN checked
Want results from more Discord servers?
Add your server