Re: [csswg-drafts] [css-borders] Add a 'hairline' border-width value (#3720)

The negative outline offset use-case is going to be hindered by CSS half-pixels. If the containing element is not already aligned to the device-pixel grid, then it'll have uneven gaps between child elements, preventing the negative offset from correctly overlapping as desired. You can simulate this for yourself by overriding your display to have a fractional DPR, or on some browsers using the "zoom" feature.

I'd be in favor of `env(device-pixel-ratio)`, you can already inject this with javascript, and you can use it to solve both the box alignment and border-width issues.

I know previously it's been expressed that `device-pixel-ratio` is meaningless in print, but the same is true for `env(hairline)` or `border-round()` - print doesn't have the same sub-pixel rendering constraints as screens. For print contexts, `env(device-pixel-ratio)` could simply return 1 (or the printer's actual resolution ratio if available), just as hairline borders would need some sensible fallback behavior for print media.

-- 
GitHub Notification of comment by webstrand
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3720#issuecomment-3377545744 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 15:57:42 UTC