- From: Emilio Cobos Álvarez via GitHub <noreply@w3.org>
- Date: Tue, 07 Oct 2025 11:04:16 +0000
- To: public-css-archive@w3.org
emilio has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-borders] [css-ui] Consider rounding (negative?) outline-offsets like border-widths == Doing 'inset' outlines is a pretty common thing to do. However doing it well is rather non-trivial. The obvious way: ```css input:focus-visible { outline: 2px solid blue; outline-offset: -2px; } ``` Breaks with fractional scaling, because the negative offset doesn't get rounded like the width. With `env(hairline)` as proposed in #3720 it becomes possible to do (assuming hairline == 1 devpx which isn't _quite_ guaranteed but should hold in today's screens), but slightly annoying: ```css outline-offset: calc(-1 * max(env(hairline), round(down, 2px, env(hairline))); ``` With `border-round()`, also discussed on that issue, this would become one of: ```css outline-offset: border-round(-2px); outline-offset: calc(-1 * border-round(2px)); ``` However, in this particular case of negative outline offsets, it seems reasonable to make the "obvious" code work? Should we round negative outline offsets (or outline offsets more generally, even positive) like borders? Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12906 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 7 October 2025 11:04:17 UTC