Borders

Outline Style

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

Quick reference

Class	Description
outline-none	outline: 2px solid transparent outline-offset: 2px
outline	outline-style: solid
outline-dashed	outline-style: dashed
outline-dotted	outline-style: dotted
outline-double	outline-style: double

Basic usage

Setting the outline style

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

outline

outline-dashed

outline-dotted

outline-double

<div class="outline outline-offset-4 outline-4 ..."></div>
<div class="outline-dashed outline-offset-4 outline-4 ..."></div>
<div class="outline-dotted outline-offset-4 outline-4 ..."></div>
<div class="outline-double outline-offset-4 outline-4 ..."></div>

Removing outlines

Use outline-none to hide the default browser outline on focused elements.

It is highly recommended to apply Warp's focus styling for accessibility when using this utility.

<input type="text" class="..." placeholder="Default focus style" />
<input type="text" class="outline-none ..." placeholder="No focus style with outline-none" />
<input type="text" class="focusable focus:[--w-outline-offset:-2px]" placeholder="Warp-s focus style" />

The outline-none utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to Windows high contrast mode users.

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-dashed to only apply the outline-dashed utility on hover.

<div class="outline hover:outline-dashed"></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-dashed to apply the outline-dashed utility at only medium screen sizes and above.

<div class="outline md:outline-dashed"></div>