Utilities
Borders
Border width and style, radius, divide, ring and outline utilities.
193classes
323variant classes
20properties
Live example
<div class="flex flex-wrap items-center gap-4">
<div class="size-16 rounded-none border-2 border-primary"></div>
<div class="size-16 rounded-lg border-4 border-dashed border-accent"></div>
<div class="size-16 rounded-2xl border bg-surface ring-4 ring-primary/30"></div>
<div class="size-16 rounded-full border-8 border-double border-primary"></div>
<div class="divide-y rounded-xl border bg-surface w-40 text-sm"><p class="px-3 py-2">divide-y</p><p class="px-3 py-2">between</p><p class="px-3 py-2">rows</p></div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example focus-visible:ring-0. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | focus:focus-within:focus-visible: | 25 |
| Group and peer | not generated | 0 |
| Structure | first:last:odd:even: | 5 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | rtl:ltr:forced-colors: | 81 |
Border width 5
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
border-0 | border-width: 0; | first last odd even forced-colors |
border-2 | border-width: 2px; | forced-colors |
border-4 | border-width: 4px; | forced-colors |
border-8 | border-width: 8px; | forced-colors |
border | border-width: 1px; | forced-colors |
Border left width 10
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
border-x-0 | border-left-width: 0; border-right-width: 0; | rtl ltr forced-colors |
border-x-2 | border-left-width: 2px; border-right-width: 2px; | rtl ltr forced-colors |
border-x-4 | border-left-width: 4px; border-right-width: 4px; | rtl ltr forced-colors |
border-x-8 | border-left-width: 8px; border-right-width: 8px; | rtl ltr forced-colors |
border-x | border-left-width: 1px; border-right-width: 1px; | rtl ltr forced-colors |
border-l-0 | border-left-width: 0; | first last odd even rtl ltr forced-colors |
border-l-2 | border-left-width: 2px; | rtl ltr forced-colors |
border-l-4 | border-left-width: 4px; | rtl ltr forced-colors |
border-l-8 | border-left-width: 8px; | rtl ltr forced-colors |
border-l | border-left-width: 1px; | rtl ltr forced-colors |
Border top width 15
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
border-y-0 | border-top-width: 0; border-bottom-width: 0; | forced-colors |
border-y-2 | border-top-width: 2px; border-bottom-width: 2px; | forced-colors |
border-y-4 | border-top-width: 4px; border-bottom-width: 4px; | forced-colors |
border-y-8 | border-top-width: 8px; border-bottom-width: 8px; | forced-colors |
border-y | border-top-width: 1px; border-bottom-width: 1px; | forced-colors |
border-t-0 | border-top-width: 0; | first last odd even forced-colors |
border-t-2 | border-top-width: 2px; | forced-colors |
border-t-4 | border-top-width: 4px; | forced-colors |
border-t-8 | border-top-width: 8px; | forced-colors |
border-t | border-top-width: 1px; | forced-colors |
divide-y-0 | border-top-width: 0; border-bottom-style: solid; border-bottom-width: 0; | |
divide-y-2 | border-top-width: 0; border-bottom-style: solid; border-bottom-width: 2px; | |
divide-y-4 | border-top-width: 0; border-bottom-style: solid; border-bottom-width: 4px; | |
divide-y-8 | border-top-width: 0; border-bottom-style: solid; border-bottom-width: 8px; | |
divide-y | border-top-width: 0; border-bottom-style: solid; border-bottom-width: 1px; |
Border right width 5
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
border-r-0 | border-right-width: 0; | first last odd even rtl ltr forced-colors |
border-r-2 | border-right-width: 2px; | rtl ltr forced-colors |
border-r-4 | border-right-width: 4px; | rtl ltr forced-colors |
border-r-8 | border-right-width: 8px; | rtl ltr forced-colors |
border-r | border-right-width: 1px; | rtl ltr forced-colors |
Border bottom width 5
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
border-b-0 | border-bottom-width: 0; | first last odd even forced-colors |
border-b-2 | border-bottom-width: 2px; | forced-colors |
border-b-4 | border-bottom-width: 4px; | forced-colors |
border-b-8 | border-bottom-width: 8px; | forced-colors |
border-b | border-bottom-width: 1px; | forced-colors |
Border inline start width 5
Variants: forced-colors:
| Class | CSS |
|---|---|
border-s-0 | border-inline-start-width: 0; |
border-s-2 | border-inline-start-width: 2px; |
border-s-4 | border-inline-start-width: 4px; |
border-s-8 | border-inline-start-width: 8px; |
border-s | border-inline-start-width: 1px; |
Border inline end width 5
Variants: forced-colors:
| Class | CSS |
|---|---|
border-e-0 | border-inline-end-width: 0; |
border-e-2 | border-inline-end-width: 2px; |
border-e-4 | border-inline-end-width: 4px; |
border-e-8 | border-inline-end-width: 8px; |
border-e | border-inline-end-width: 1px; |
Border style 11
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
border-solid | border-style: solid; | forced-colors |
border-dashed | border-style: dashed; | forced-colors |
border-dotted | border-style: dotted; | forced-colors |
border-double | border-style: double; | forced-colors |
border-none | border-style: none; | forced-colors |
divide-solid | border-style: solid; | |
divide-dashed | border-style: dashed; | |
divide-dotted | border-style: dotted; | |
divide-double | border-style: double; | |
divide-none | border-style: none; |
Border radius 11
Variants: none
| Class | CSS |
|---|---|
rounded-none | border-radius: 0; |
rounded-xs | border-radius: 0.125rem; |
rounded-sm | border-radius: 0.25rem; |
rounded | border-radius: 0.25rem; |
rounded-md | border-radius: 0.375rem; |
rounded-lg | border-radius: 0.5rem; |
rounded-xl | border-radius: 0.75rem; |
rounded-2xl | border-radius: 1rem; |
rounded-3xl | border-radius: 1.5rem; |
rounded-4xl | border-radius: 2rem; |
rounded-full | border-radius: 9999px; |
Border top left radius 33
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
rounded-t-none | border-top-left-radius: 0; border-top-right-radius: 0; | |
rounded-t-xs | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; | |
rounded-t-sm | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; | |
rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; | |
rounded-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; | |
rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; | |
rounded-t-xl | border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; | |
rounded-t-2xl | border-top-left-radius: 1rem; border-top-right-radius: 1rem; | |
rounded-t-3xl | border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; | |
rounded-t-4xl | border-top-left-radius: 2rem; border-top-right-radius: 2rem; | |
rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px; | |
rounded-l-none | border-top-left-radius: 0; border-bottom-left-radius: 0; | rtl ltr |
rounded-l-xs | border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; | rtl ltr |
rounded-l-sm | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; | rtl ltr |
rounded-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; | rtl ltr |
rounded-l-md | border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; | rtl ltr |
rounded-l-lg | border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; | rtl ltr |
rounded-l-xl | border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; | rtl ltr |
rounded-l-2xl | border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; | rtl ltr |
rounded-l-3xl | border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; | rtl ltr |
rounded-l-4xl | border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; | rtl ltr |
rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; | rtl ltr |
rounded-tl-none | border-top-left-radius: 0; | rtl ltr |
rounded-tl-xs | border-top-left-radius: 0.125rem; | rtl ltr |
rounded-tl-sm | border-top-left-radius: 0.25rem; | rtl ltr |
rounded-tl | border-top-left-radius: 0.25rem; | rtl ltr |
rounded-tl-md | border-top-left-radius: 0.375rem; | rtl ltr |
rounded-tl-lg | border-top-left-radius: 0.5rem; | rtl ltr |
rounded-tl-xl | border-top-left-radius: 0.75rem; | rtl ltr |
rounded-tl-2xl | border-top-left-radius: 1rem; | rtl ltr |
rounded-tl-3xl | border-top-left-radius: 1.5rem; | rtl ltr |
rounded-tl-4xl | border-top-left-radius: 2rem; | rtl ltr |
rounded-tl-full | border-top-left-radius: 9999px; | rtl ltr |
Border top right radius 22
Variants: rtl:ltr:
| Class | CSS |
|---|---|
rounded-r-none | border-top-right-radius: 0; border-bottom-right-radius: 0; |
rounded-r-xs | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; |
rounded-r-sm | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; |
rounded-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; |
rounded-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; |
rounded-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; |
rounded-r-xl | border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; |
rounded-r-2xl | border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; |
rounded-r-3xl | border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; |
rounded-r-4xl | border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; |
rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; |
rounded-tr-none | border-top-right-radius: 0; |
rounded-tr-xs | border-top-right-radius: 0.125rem; |
rounded-tr-sm | border-top-right-radius: 0.25rem; |
rounded-tr | border-top-right-radius: 0.25rem; |
rounded-tr-md | border-top-right-radius: 0.375rem; |
rounded-tr-lg | border-top-right-radius: 0.5rem; |
rounded-tr-xl | border-top-right-radius: 0.75rem; |
rounded-tr-2xl | border-top-right-radius: 1rem; |
rounded-tr-3xl | border-top-right-radius: 1.5rem; |
rounded-tr-4xl | border-top-right-radius: 2rem; |
rounded-tr-full | border-top-right-radius: 9999px; |
Border bottom right radius 22
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
rounded-b-none | border-bottom-right-radius: 0; border-bottom-left-radius: 0; | |
rounded-b-xs | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem; | |
rounded-b-sm | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; | |
rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; | |
rounded-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; | |
rounded-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; | |
rounded-b-xl | border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem; | |
rounded-b-2xl | border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem; | |
rounded-b-3xl | border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem; | |
rounded-b-4xl | border-bottom-right-radius: 2rem; border-bottom-left-radius: 2rem; | |
rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; | |
rounded-br-none | border-bottom-right-radius: 0; | rtl ltr |
rounded-br-xs | border-bottom-right-radius: 0.125rem; | rtl ltr |
rounded-br-sm | border-bottom-right-radius: 0.25rem; | rtl ltr |
rounded-br | border-bottom-right-radius: 0.25rem; | rtl ltr |
rounded-br-md | border-bottom-right-radius: 0.375rem; | rtl ltr |
rounded-br-lg | border-bottom-right-radius: 0.5rem; | rtl ltr |
rounded-br-xl | border-bottom-right-radius: 0.75rem; | rtl ltr |
rounded-br-2xl | border-bottom-right-radius: 1rem; | rtl ltr |
rounded-br-3xl | border-bottom-right-radius: 1.5rem; | rtl ltr |
rounded-br-4xl | border-bottom-right-radius: 2rem; | rtl ltr |
rounded-br-full | border-bottom-right-radius: 9999px; | rtl ltr |
Border bottom left radius 11
Variants: rtl:ltr:
| Class | CSS |
|---|---|
rounded-bl-none | border-bottom-left-radius: 0; |
rounded-bl-xs | border-bottom-left-radius: 0.125rem; |
rounded-bl-sm | border-bottom-left-radius: 0.25rem; |
rounded-bl | border-bottom-left-radius: 0.25rem; |
rounded-bl-md | border-bottom-left-radius: 0.375rem; |
rounded-bl-lg | border-bottom-left-radius: 0.5rem; |
rounded-bl-xl | border-bottom-left-radius: 0.75rem; |
rounded-bl-2xl | border-bottom-left-radius: 1rem; |
rounded-bl-3xl | border-bottom-left-radius: 1.5rem; |
rounded-bl-4xl | border-bottom-left-radius: 2rem; |
rounded-bl-full | border-bottom-left-radius: 9999px; |
Border inline style 5
Variants: none
| Class | CSS |
|---|---|
divide-x-0 | border-inline-style: solid; border-inline-start-width: 0; border-inline-end-width: 0; |
divide-x-2 | border-inline-style: solid; border-inline-start-width: 0; border-inline-end-width: 2px; |
divide-x-4 | border-inline-style: solid; border-inline-start-width: 0; border-inline-end-width: 4px; |
divide-x-8 | border-inline-style: solid; border-inline-start-width: 0; border-inline-end-width: 8px; |
divide-x | border-inline-style: solid; border-inline-start-width: 0; border-inline-end-width: 1px; |
Ring width 6
Variants: focus:focus-within:focus-visible:
| Class | CSS |
|---|---|
ring-0 | --m-ring-offset-shadow: var(--m-ring-inset,) 0 0 0 var(--m-ring-offset-width) var(--m-ring-offset-color); --m-ring-shadow: var(--m-ring-inset,) 0 0 0 calc(0px + var(--m-ring-offset-width)) var(--m-ring-color); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
ring-1 | --m-ring-offset-shadow: var(--m-ring-inset,) 0 0 0 var(--m-ring-offset-width) var(--m-ring-offset-color); --m-ring-shadow: var(--m-ring-inset,) 0 0 0 calc(1px + var(--m-ring-offset-width)) var(--m-ring-color); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
ring-2 | --m-ring-offset-shadow: var(--m-ring-inset,) 0 0 0 var(--m-ring-offset-width) var(--m-ring-offset-color); --m-ring-shadow: var(--m-ring-inset,) 0 0 0 calc(2px + var(--m-ring-offset-width)) var(--m-ring-color); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
ring-4 | --m-ring-offset-shadow: var(--m-ring-inset,) 0 0 0 var(--m-ring-offset-width) var(--m-ring-offset-color); --m-ring-shadow: var(--m-ring-inset,) 0 0 0 calc(4px + var(--m-ring-offset-width)) var(--m-ring-color); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
ring-8 | --m-ring-offset-shadow: var(--m-ring-inset,) 0 0 0 var(--m-ring-offset-width) var(--m-ring-offset-color); --m-ring-shadow: var(--m-ring-inset,) 0 0 0 calc(8px + var(--m-ring-offset-width)) var(--m-ring-color); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
ring | --m-ring-offset-shadow: var(--m-ring-inset,) 0 0 0 var(--m-ring-offset-width) var(--m-ring-offset-color); --m-ring-shadow: var(--m-ring-inset,) 0 0 0 calc(3px + var(--m-ring-offset-width)) var(--m-ring-color); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
Ring inset 1
Variants: focus:focus-within:focus-visible:
| Class | CSS |
|---|---|
ring-inset | --m-ring-inset: inset; |
Ring offset width 5
Variants: focus:focus-within:focus-visible:
| Class | CSS |
|---|---|
ring-offset-0 | --m-ring-offset-width: 0px; |
ring-offset-1 | --m-ring-offset-width: 1px; |
ring-offset-2 | --m-ring-offset-width: 2px; |
ring-offset-4 | --m-ring-offset-width: 4px; |
ring-offset-8 | --m-ring-offset-width: 8px; |
Outline 2
Variants: focus:focus-within:focus-visible:forced-colors:
| Class | CSS |
|---|---|
outline-none | outline: 2px solid transparent; outline-offset: 2px; |
Outline style 9
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
outline | outline-style: solid; outline-width: 1px; | focus focus-within focus-visible forced-colors |
outline-0 | outline-style: solid; outline-width: 0px; | focus focus-within focus-visible forced-colors |
outline-1 | outline-style: solid; outline-width: 1px; | focus focus-within focus-visible forced-colors |
outline-2 | outline-style: solid; outline-width: 2px; | focus focus-within focus-visible forced-colors |
outline-4 | outline-style: solid; outline-width: 4px; | focus focus-within focus-visible forced-colors |
outline-8 | outline-style: solid; outline-width: 8px; | focus focus-within focus-visible forced-colors |
outline-dashed | outline-style: dashed; | forced-colors |
outline-dotted | outline-style: dotted; | forced-colors |
outline-double | outline-style: double; | forced-colors |
Outline offset 5
Variants: focus:focus-within:focus-visible:forced-colors:
| Class | CSS |
|---|---|
outline-offset-0 | outline-offset: 0px; |
outline-offset-1 | outline-offset: 1px; |
outline-offset-2 | outline-offset: 2px; |
outline-offset-4 | outline-offset: 4px; |
outline-offset-8 | outline-offset: 8px; |