[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:

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:

  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:

  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?

Bug 1985190 - Snap outline offsets like border-widths. r=firefox-styl…

Snap outline offsets like border-widths.

Bug 1985190 - Snap outline offsets like border-widths. r=firefox-styl…

Snap outline offsets like border-widths.

This makes sense to me. Even for positive offsets, having the offset be consistent on all sides of the box and at least 1 device pixel when it is not zero is probably desirable.

The CSS Working Group just discussed [css-borders] [css-ui] Consider rounding (negative?) outline-offsets like border-widths, and agreed to the following:

RESOLVED: Round outline-offset same as outline-width and border-width

The full IRC log of that discussion

<fantasai> emilio: Fairly common use case to have a negative outline-offset to go over the border.
<fantasai> emilio: given the way things work by default, border gets rounded differently, and outline doesn't cleanly fit
<fantasai> emilio: Feel it should be uncontroversial to round outline-offset the same way as borders
<fantasai> emilio: Firefox has been doing this for awhile to fix high-DPI issues
<fantasai> emilio: I think we should just do it everywhere
<fantasai> +1 from us
<fantasai> florian: I think for awhile we didn't specify outline at all because UI, but not doing this anymore.
<fantasai> astearns: Just outline-offset?
<fantasai> emilio: outline-width is already rounded like border-width
<lwarlow> +1
<fantasai> PROPOSED: Round outline-offset same as outline-width and border-width
<kbabbitt> sgtm
<florian> s/we didn't specify outline at all /we deliberately didn't specify outline much
<fantasai> RESOLVED: Round outline-offset same as outline-width and border-width
<lea> +1
<fantasai> weinig: I will note that there are some open issues wrt rounding, especially regarding zoom
<fantasai> weinig: So if we do this, would be good to get to some of those zoom-related outline and border questions sooner than later
<fantasai> astearns: issues?
<fantasai> weinig: Yeah, I'll post in IRC.
<fantasai> astearns: ok, let's leave space to add those to the logs. But we're done for today.
<fantasai> Meeting closed.
<weinig> its written in terms of border-width, but applies to outline-width and column-rule-width as well, https://github.com//issues/13350

Round outline-offset like border-width

[css-ui] outline-offset computed value should be snapped as a line width

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

fantasai commented on Dec 10, 2025

css-meeting-bot commented on Feb 25, 2026

sb3nder commented on Apr 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions