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:2px outline:solid">    ...</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 outline: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.