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?