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

> is the thrust of the argument: if we let people draw lines at 1dppx or 2dppx, it may look fine on their 96dpi display, but at 300dpi those features are now invisible?

That's exactly it, yes. We have many examples across the years, both in CSS itself and in similar UI frameworks, where giving people access to a *variable-sized unit* that will have a stable size on *their* machines but not across their users' machines, or across time as hardware improves, leads to bad results.

People, very reasonably, use the tools that they have, in ways that appear to work for them at that moment. If they need a sharp, <1px line, and we give them device pixels, they'll try it out, see that a 1dp line looks good, and stick with it. Doing the "correct" thing of setting a *small but relatively static* line size and just *rounding* it to device pixels is more difficult, both to remember to do and simply to write, so most people won't do it.  There's no shame or shade in this; it's human nature, and it's something every language designer needs to keep in mind.

The "correct" thing to do wrt device pixels varies by use-case, which is why I think attempts to address them generically are doomed to fail. As you outline in the use-cases in your comment, there are a number of different possible concerns people might need to deal with when solving problems in the device-pixel space.

> I could see an argument where instead of giving access directly to dppx, you defined a hairline unit that was guaranteed to be an integer multiple of device pixels.

Yup, that's exactly the proposal. The `env(hairline)` value would be a browser-determined length that is just visible, rounded to the nearest integer number of device pixels (with a min of 1dp) at default zoom levels. `border-width: hairline` would be a slightly shorter way to specify the same thing, akin to `border-width: medium` being equivalent to `3px`.

> For instance aligning a button on top of a background image, would look strange if :hover styles caused it to be 1dppx offset from the background due to hairline layout constraints.

This sort of thing is already an issue authors have to deal with, and the common solution of using a same-width transparent border for the "no border" style would work just the same here.

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


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

Received on Thursday, 15 January 2026 23:32:36 UTC