[csswg-drafts] [css-borders] [css-ui] Consider rounding (negative?) outline-offsets like border-widths (#12906)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-borders] [css-ui] Consider rounding (negative?) outline-offsets like border-widths ==
Doing 'inset' outlines is a pretty common thing to do. However doing it well is rather non-trivial.

The obvious way:

```css
input:focus-visible {
  outline: 2px solid blue;
  outline-offset: -2px;
}
```

Breaks with fractional scaling, because the negative offset doesn't get rounded like the width.

With `env(hairline)` as proposed in #3720 it becomes possible to do (assuming hairline == 1 devpx which isn't _quite_ guaranteed but should hold in today's screens), but slightly annoying:

```css
  outline-offset: calc(-1 * max(env(hairline), round(down, 2px, env(hairline)));
```

With `border-round()`, also discussed on that issue, this would become one of:

```css
  outline-offset: border-round(-2px);
  outline-offset: calc(-1 * border-round(2px));
```

However, in this particular case of negative outline offsets, it seems reasonable to make the "obvious" code work?

Should we round negative outline offsets (or outline offsets more generally, even positive) like borders?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12906 using your GitHub account


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

Received on Tuesday, 7 October 2025 11:04:17 UTC