Skip to content

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

@emilio

Description

@emilio

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?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Agenda+

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions