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
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 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
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...
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
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
looks like safari just fixed this in March 2023 with 16.4: https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
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.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
take a look at
box-shadow it can be inset or outset (the default) and does not effect layout.oh wow, I didn't know that was there, thanks @jsnkuhn !
you can use the amazing caniuse website
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.
thats a good point
oh yeah, weird. caniuse doesn't show the border-radius details unless you only have MDN checked