Borders

Border Width

Utilities for controlling the border width of an element.

Quick reference

Class	Description
border	border-width: 1px
border-x	border-left-width: 1px border-right-width: 1px
border-y	border-top-width: 1px border-bottom-width: 1px
border-t	border-top-width: 1px
border-r	border-right-width: 1px
border-b	border-bottom-width: 1px
border-l	border-left-width: 1px
border-{size}	border-radius: {size}
border-x-{size}	border-left-width: {size} border-right-width: {size}
border-y-{size}	border-top-width: {size} border-bottom-width: {size}
border-t-{size}	border-top-width: {size}
border-r-{size}	border-right-width: {size}
border-b-{size}	border-bottom-width: {size}
border-l-{size}	border-left-width: {size}

Available values
{size}: 0, 2, 4, 8

Basic usage

All sides

Use the border-0, border, border-2, border-4, or border-8 utilities to set the border width for all sides of an element.

border

border-2

border-4

border-8

<div class="border ..."></div>
<div class="border-2 ..."></div>
<div class="border-4 ..."></div>
<div class="border-8 ..."></div>

Individual sides

Use the border-{side}, border-{side}-0, border-{side}-2, border-{side}-4, or border-{side}-8 utilities to set the border width for one side of an element.

border-t-4

border-r-4

border-b-4

border-l-4

<div class="border-t-4 ..."></div>
<div class="border-r-4 ..."></div>
<div class="border-b-4 ..."></div>
<div class="border-l-4 ..."></div>

Horizontal and vertical sides

Use the border-{x|y}-{width} utilities to set the border width on two sides of an element at the same time.

border-x-4

border-y-4

<div class="border-x-4 ..."></div>
<div class="border-y-4 ..."></div>

Arbitrary values

If you need to use a one-off border-{width} value, use square brackets to generate a property using any arbitrary width. This also works with or without an optional side:
border-{side}-[{width}] | border-[{width}]

<div class="border-[66]"></div>

Applying conditionally

Hover, focus, and other states

You can conditionally apply utility classes in different states using variant modifiers. For example, use hover:border-t-4 to only apply the border-t-4 utility on hover.

<div class="border-2 hover:border-t-4"></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:border-t-4 to apply the border-t-4 utility at only medium screen sizes and above.

<div class="border-2 md:border-t-4"></div>