Skip to content

Outline Offset

Controls the offset of an element’s outline.

Class Properties

oo-0

outline-offset: 0px;

oo-1

outline-offset: 4px;

oo-2

outline-offset: 8px;

oo-3

outline-offset: 12px;

oo-4

outline-offset: 16px;
<div class="d-g g-16 gtc-2">
<button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-1 os-s px-5 py-1 rad-1">Subscribe</button>
<button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-2 os-s px-5 py-1 rad-1">Subscribe</button>
</div>

Using breakpoints

Using responsive breakpoints like sm:oo-*, md:oo-*, lg:oo-*, and xxl:oo-* allows targeting specific utilities in different viewports.

<div class="oo-1 md:oo-2 ..."></div>

Using variants

Using :hover variants such as h:oo-* allows you to override elements and change their values when hovering over them.

<div class="oo-1 h:oo-2 ..."></div>