Borders & Outlines

outline-width

Setting the thickness of an element's outline.

Class	Declarations
`outline-medium`	`outline-width: medium;`
`outline-thick`	`outline-width: thick;`
`outline-thin`	`outline-width: thin;`
`outline-width:<size>`	`outline-width: <size>;`

Examples

Set outline width

A length in outline:<size> changes the outline width independently. Compare 2px and 6px outlines around identical buttons; their layout size does not grow.

Set outline width

The readout reports this browser’s resolved width, including native keywords. The measured layout box excludes the outline.

<!-- 2px outline · same layout box --><button id="target" type="button"  class="inline-flex items-center justify-center         min-h:44px max-w:100% px-md py-sm         b:1px|solid|var(--color-line-base) r-sm outline-solid         outline-offset-3xs outline-width:2px outline-blue         font-md bg-surface-base text-body box-border         bg-surface-muted:focus-visible">  Preview details</button>

<!-- 6px outline · paint grows outward --><button id="target" type="button"  class="inline-flex items-center justify-center         min-h:44px max-w:100% px-md py-sm         b:1px|solid|var(--color-line-base) r-sm outline-solid         outline-offset-3xs outline-width:6px outline-blue         font-md bg-surface-base text-body box-border         bg-surface-muted:focus-visible">  Preview details</button>

Generated CSS

@layer utilities {  .outline-width\:2px {    outline-width: 2px  }}

Use outline-thin, outline-medium and outline-thick for native keyword widths without resetting style or color. The explicit outline-width:* longhands are equivalent. Read the browser’s resolved pixel values below.

Use keyword widths

The readout reports this browser’s resolved width, including native keywords. The measured layout box excludes the outline.

<!-- Thin · native width keyword --><button id="target" type="button"  class="inline-flex items-center justify-center         min-h:44px max-w:100% px-md py-sm         b:1px|solid|var(--color-line-base) r-sm outline-solid         outline-thin outline-offset-3xs outline-blue         font-md bg-surface-base text-body box-border         bg-surface-muted:focus-visible">  Preview details</button>

<!-- Medium · native width keyword --><button id="target" type="button"  class="inline-flex items-center justify-center         min-h:44px max-w:100% px-md py-sm         b:1px|solid|var(--color-line-base) r-sm outline-medium         outline-solid outline-offset-3xs         outline-blue font-md bg-surface-base         text-body box-border         bg-surface-muted:focus-visible">  Preview details</button>

<!-- Thick · native width keyword --><button id="target" type="button"  class="inline-flex items-center justify-center         min-h:44px max-w:100% px-md py-sm         b:1px|solid|var(--color-line-base) r-sm outline-solid         outline-thick outline-offset-3xs         outline-blue font-md bg-surface-base         text-body box-border         bg-surface-muted:focus-visible">  Preview details</button>

These keywords resolve to lengths. outline:thin is instead a full shorthand with the style omitted; that resets the style to none and leaves no visible outline. A visible style must be supplied.

Apply conditionally

Keyboard focus increases the outline from 2px to 4px. Width grows into the surrounding paint area without moving or resizing the button. Print removes the outline width.

Apply conditionally

The readout reports this browser’s resolved width, including native keywords. The measured layout box excludes the outline.

<!-- 2px → 4px on keyboard focus --><button id="target" type="button"  class="inline-flex items-center justify-center         min-h:44px max-w:100% px-md py-sm         b:1px|solid|var(--color-line-base) r-sm outline-solid         outline-offset-3xs outline-width:2px outline-blue         font-md bg-surface-base text-body box-border         bg-surface-muted:focus-visible         outline-width:0@print         outline-width:4px:focus-visible@screen">  Preview details</button>