Borders
Utilities for controlling the width of an element's outline.
Class | Styles |
---|---|
outline | outline-width: 1px; |
outline-<number> | outline-width: <number>px; |
outline-(length:<custom-property>) | outline-width: var(<custom-property>); |
outline-[<value>] | outline-width: <value>; |
Use outline
and outline-<number>
utilities like outline-2
and outline-4
to set the width of an element's outline:
Prefix an outline-width
utility with a variant like focus:*
to only apply the utility in that state:
Focus the button to see the outline added
Learn more about using variants in the variants documentation.
Use the outline-[<value>]
syntax to set the outline width based on a completely custom value:
<div class="outline-[2vw] ..."> <!-- ... --></div>
For CSS variables, you can also use the outline-(length:<custom-property>)
syntax:
<div class="outline-(length:--my-outline-width) ..."> <!-- ... --></div>
This is just a shorthand for outline-[length:var(<custom-property>)]
that adds the var()
function for you automatically.
Prefix an outline-width
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="outline md:outline-2 ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.