Border width

Utilities for controlling the width of an element's borders


Class reference

ClassProperties
border-0border-width: 0;
borderborder-width: 1px;
border-2border-width: 2px;
border-4border-width: 4px;
border-6border-width: 6px;
border-8border-width: 8px;
border-t-0border-top-width: 0;
border-tborder-top-width: 1px;
border-t-2border-top-width: 2px;
border-t-4border-top-width: 4px;
border-t-6border-top-width: 6px;
border-t-8border-top-width: 8px;
border-r-0border-right-width: 0;
border-rborder-right-width: 1px;
border-r-2border-right-width: 2px;
border-r-4border-right-width: 4px;
border-r-6border-right-width: 6px;
border-r-8border-right-width: 8px;
border-b-0border-bottom-width: 0;
border-bborder-bottom-width: 1px;
border-b-2border-bottom-width: 2px;
border-b-4border-bottom-width: 4px;
border-b-6border-bottom-width: 6px;
border-b-8border-bottom-width: 8px;
border-l-0border-left-width: 0;
border-lborder-left-width: 1px;
border-l-2border-left-width: 2px;
border-l-4border-left-width: 4px;
border-l-6border-left-width: 6px;
border-l-8border-left-width: 8px;

# All sides

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

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

# Individual sides

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

.border-t-2
.border-r-2
.border-b-2
.border-l-2
<div class="border-t-2 border-pink-400 ..."></div>
<div class="border-r-2 border-pink-400 ..."></div>
<div class="border-b-2 border-pink-400 ..."></div>
<div class="border-l-2 border-pink-400 ..."></div>

# Between elements

You can also add borders between child elements using the divide-{x/y}-{width} and divide-{color} utilities.

Learn more in the Divide Width and Divide Color documentation.

1
2
3
<div class="divide-y divide-blue-300 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div></div>
</div>

# Responsive

To control the border width of an element at a specific breakpoint, add a {screen}: prefix to any existing border width utility. 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>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.