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

I brought up `border-round()` in this thread originally as I believe it solves most of the issues discussed here.

The algorithm for rounding borders is already meant to ensure small borders remain visible. If its current exact definition doesn't do that for print I would suggest tweaking that definition. The same is true for potential future extreme resolutions. If clamping to 1 device pixel is too small on some future device then the device maker will likely ignore the spec and clamp to 2 device pixels to ensure the web works well on that device and the spec will eventually have to be tweaked to match that reality.

This makes me wonder why `hairline` is needed at all if you can do `--hairline: border-round(0.01px);` yourself and define something similar while retaining artistic control over the resolution required for it to become multiple actual device pixels.

The issues around overlapping borders with negative margins, outline offsets not rounding like borders or sizing a box to the same size as another that has borders are all solvable with `border-round()`. `border-round()` therefor seems like the missing primitive to allow you to solve all these issues.

`border-round()` does not have any of the issues that introducing a device pixel unit would have as borders are already rounded this way. How that rounding is handled when you zoom for example is already a solved problem. Both hairline and a device pixel unit would produce uncertainty around how to handle zoom. Do they increase in size or do they ignore the zoom? If you want to use them as a length I think increasing in size is the right answer but if you want to use them as a rounding interval in round() you probably want them to ignore the zoom, at least if you want to be able to emulate `border-round()` with them.

I originally didn't express any reservations against introducing `hairline`, even though I don't find it useful myself, as I see no issue with having it as well. However `border-round()` is in my opinion the missing primitive that actually unlocks things that aren't possible otherwise.

-- 
GitHub Notification of comment by GabbeV
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3720#issuecomment-3761850802 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 16 January 2026 21:20:18 UTC