Borders

Outline Offset

Utilities for controlling the offset of an outline of an element.

Class	Description
outline-offset-{size}	outline-offset: {size}

Available values
{size}: 0, 1, 2, 4, 8

Basic usage

Setting the outline offset

Use the outline-offset-{size} utilities to set the outline offset for an element.

outline-offset-1

outline-offset-2

outline-offset-4

outline-offset-8

<div class="outline outline-offset-1 outline-4 ..."></div>
<div class="outline outline-offset-2 outline-4 ..."></div>
<div class="outline outline-offset-4 outline-4 ..."></div>
<div class="outline outline-offset-8 outline-4 ..."></div>

Applying conditionally

Hover, focus, and other states

Warp lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:outline-offset-4 to only apply the outline-offset-4 utility on hover.

<div class="outline-offset-2 hover:outline-offset-4"></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:outline-offset-4 to apply the outline-offset-4 utility at only medium screen sizes and above.

<div class="outline-offset-2 md:outline-offset-4"></div>