outline-style
Setting the style of an element's outline.
Overview
| Class | Declarations |
|---|---|
outline-none | outline-style: none;
|
outline-dotted | outline-style: dotted;
|
outline-dashed | outline-style: dashed;
|
outline-solid | outline-style: solid;
|
outline-double | outline-style: double;
|
outline-style:groove | outline-style: groove;
|
outline-style:ridge | outline-style: ridge;
|
outline-style:inset | outline-style: inset;
|
outline-style:outset | outline-style: outset;
|
outline-style:<style> | outline-style: <style>;
|
Examples
Set outline style
Use outline-solid or outline-dashed to change only outline-style. These dedicated style utilities preserve the separately declared width and color.
<!-- Solid · dedicated style utility --><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:3px outline-blue font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button><!-- Dashed · same width and color --><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-dashed outline-offset-3xs outline-width:3px outline-blue font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Preview details</button>Generated CSS
@layer utilities { .outline-solid { outline-style: solid } .outline\:solid { outline: solid }}outline:solid is the full outline shorthand, so it also resets width and color. Use the dedicated style utility or explicit outline-style:solid longhand when those values should be preserved.
Use dashed focus indicators
Use Tab to focus the real skip link, then Enter to move to its destination. Its dashed outline is a keyboard focus treatment; the visible link remains available without focus.
<!-- Native skip link · keyboard destination --><a id="target" href="#destination" class="inline-block outline-dashed outline-offset-3xs outline-width:3px outline-color:transparent text-decoration:underline text-blue outline-blue:focus-visible"> Skip to content</a><section id="destination" tabindex="-1" class="mt-xl p-md bg-surface-muted text-body"> <h4 class="m:0 font-lg"> Preview content </h4> <p class="mx:0 mb:0 mt-sm"> The link moves keyboard focus here. </p></section>Keep a real href and an appropriate destination. A decorative anchor with no destination is not a keyboard-operable skip link.
Apply conditionally
The button has a solid resting outline. Keyboard focus changes only its style to dotted. Print removes the style and therefore the used outline width.
<!-- Solid → dotted 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:3px outline-blue font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible outline-none@print outline-dotted:focus-visible@screen"> Preview details</button>Use outline when all three outline components should change together.