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

Sorry for spamming things that someone may have mentioned above already. There are too many replies above, thus tl;dr...

According to the definition:
https://drafts.csswg.org/css-values-4/#snap-a-length-as-a-border-width
> To snap a length as a border width given a <length> len:
> 1. Assert: len is non-negative.
> 2. If len is an integer number of device pixels, do nothing.
> 3. If len is greater than zero, but less than 1 device pixel, round len up to 1 device pixel.
> 4. If len is greater than 1 device pixel, round it down to the nearest integer number of device pixels.

Here's a not quite pure CSS polyfill for `border-width()`:
```css
--device-pixel-ratio: 1.25;
--css-width: 2px;
--border-width: calc(
 max( /*at least 1 device px, or 0 if size <= 0*/
  round( /*round down to integer*/
   down,
   var(--css-width) * var(--device-pixel-ratio), /*covert to device px*/
   1px
  ),
  min( /*will only be 1px (size > 0), or NaN (size <= 0) which forces the final result to be 0px*/
   max(var(--css-width), 0px) / 0, /*will only be Infinity or NaN*/
   1px
  )
 ) / var(--device-pixel-ratio) /*covert back to css px*/
);
```

Here's the demo that trying to display an inset outline to overlay the border (as [emilio](https://github.com/emilio) mentioned [above](https://github.com/w3c/csswg-drafts/issues/3720#issuecomment-3224951042)):
[demo.htm](https://github.com/user-attachments/files/22712920/demo.htm)
Box A applies the traditional method, but usually fail on fractional DPR; Box B applies the polyfill above and has a consistent appearance on any DPR.

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


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

Received on Monday, 6 October 2025 00:01:13 UTC