Border width

Class reference

# 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.

<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.

<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.

<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.