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

@emilio 
The logic I posted is complicated because it includes these 2 rules in the definition:
> 1. Assert: len is non-negative.
> 3. If len is greater than zero,

If we omit the control logic for these two assertions:
```css
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
)
```
And all the comments, the code will be:
```css
--border-width: calc(
 max(
  round(
   down,
   var(--css-width) * var(--device-pixel-ratio),
   1px
  ),
  1px
 )
 / var(--device-pixel-ratio)
);
```
And here is the code in a single line:

```css
--border-width: calc(max(round(down, var(--css-width) * var(--device-pixel-ratio), 1px), 1px) / var(--device-pixel-ratio));
```

It uses a total of 2 functions (not counting `calc()`), 3 variables, 2 operators, and 2 constants.


Your version looks simpler because it defines two variables. If you change it to use only one variable, then:

```css
--border-width: max(1px / var(--device-pixel-ratio), round(var(--css-width), 1px / var(--device-pixel-ratio)));
```

It uses a total of 2 functions, 3 variables, 2 operators, and 2 constants. Isn't it just as complicated? Well, I do agree that using `--hairline` for reusability is a good idea.

As a reminder, it needs to be rounded `down` but not `nearest`:
> 4. round it down to the nearest integer number of device pixels.

Your code breaks, for example, when the zoom level is set to 290% (`--device-pixel-ratio: 2.857142857142857`). Also, be careful that it doesn't support `--css-width: 0px`, as that will result in 1 hairline, which is incorrect.
[demo.htm](https://github.com/user-attachments/files/22722912/demo.htm)

<img width="765" height="677" alt="Image" src="https://github.com/user-attachments/assets/63d0d308-e3eb-4fab-ad76-1a1de197843d" />


-- 
GitHub Notification of comment by Merci-chao
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3720#issuecomment-3371647073 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 13:27:01 UTC