outline-width

Setting the thickness of an element's outline.

Overview

Examples

Set outline width

Use outline:* with a size to set outline-width.

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

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

Use keyword widths

Use outline:thin, outline:medium, or outline:thick for native keyword widths.

<button class="outline:thick|solid">...</button>

The outline also needs a style to be visible.

Apply conditionally

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

<div class="outline:0 outline:2px:focus outline:0@print">...</div>

Use outline-offset to move the outline away from the element edge.