outline-style

Setting the style of an element's outline.

Overview

Examples

Set outline style

Use outline:* with a style keyword to set outline-style.

<button class="outline:2px outline:solid">    ...</button>

@layer utilities {    .outline\:solid {        outline: solid    }}

Use dashed focus indicators

Use outline:dashed or outline:dotted when that style is part of the interaction design.

<a class="outline:dashed:focus">Skip to content</a>

Avoid outline:none unless another visible focus indicator is present.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="outline:none outline:solid:focus outline:none@print">...</div>

Use outline to set width, style, and color together.