Outline width

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx";

export const title = "outline-width"; export const description = "Utilities for controlling the width of an element's outline.";

", "outline-width: \px;"], ["outline-(length:\)", "outline-width: var(\);"], ["outline-[\]", "outline-width: \;"], ]} />

Examples

Basic example

Use outline or outline-<number> utilities like outline-2 and outline-4 to set the width of an element's outline:

{

outline

Button A

outline-2

Button B

outline-4

Button C

}

<!-- [!code classes:outline,outline-2,outline-4] -->
<button class="outline outline-offset-2 ...">Button A</button>
<button class="outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-4 outline-offset-2 ...">Button C</button>

Applying on focus

{

Save Changes

}

<!-- [!code classes:focus:outline-2] -->
<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>

Using a custom value

Responsive design