Skip to content

Outline Offset

Use outline-offset-<number> utilities to set the distance between an element’s border and its outline. Any non-negative integer is accepted. Negative offsets (-outline-offset-<number>) draw the outline inward.

Use utilities like outline-offset-2 and outline-offset-4 to control the outline offset:

Style('outline-2 outline-offset-0 ...', child: Text('Button A'))
Style('outline-2 outline-offset-2 ...', child: Text('Button B'))
Style('outline-2 outline-offset-4 ...', child: Text('Button C'))
ClassValue
outline-offset-<number>outline-offset: <number>px (any non-negative integer)
-outline-offset-<number>outline-offset: calc(<number>px * -1)