- From: Merci chao via GitHub <noreply@w3.org>
- Date: Mon, 06 Oct 2025 00:01:10 +0000
- To: public-css-archive@w3.org
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