0
0
Tailwindmarkup~5 mins

Border width utilities in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Border width utilities let you quickly set how thick the border around an element is. This helps you make your design clear and neat.

You want to highlight a button by making its border thicker.
You need to separate sections on a page with visible lines.
You want to create a card with a subtle border around it.
You want to adjust border thickness on different screen sizes for better look.
You want to remove a border by setting its width to zero.
Syntax
Tailwind
border-{side?}-{width}

// Examples:
border-2       // sets border width to 2 pixels on all sides
border-t-4     // sets top border width to 4 pixels
border-l-0     // removes left border by setting width to 0

{side?} is optional and can be t (top), r (right), b (bottom), l (left), or omitted for all sides.

{width} is a number representing the border thickness in pixels, like 0, 2, 4, 8.

Examples
Sets a 2-pixel border on all sides of the element.
Tailwind
border-2
Sets a 4-pixel border only on the top side.
Tailwind
border-t-4
Removes the left border by setting its width to zero.
Tailwind
border-l-0
Sets a thick 8-pixel border on the bottom side.
Tailwind
border-b-8
Sample Program

This example shows four boxes with different border widths and sides using Tailwind border width utilities. Each box uses padding so the border is visible around the text.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Border Width Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section class="max-w-md mx-auto space-y-6">
    <div class="border-2 border-blue-500 border-solid p-4">
      <p>This box has a 2px blue border on all sides.</p>
    </div>
    <div class="border-0 border-t-4 border-red-500 border-solid p-4">
      <p>This box has a 4px red border only on the top.</p>
    </div>
    <div class="border border-green-500 border-l-0 p-4">
      <p>This box has a 1px green border except no left border.</p>
    </div>
    <div class="border-0 border-b-8 border-yellow-500 border-solid p-4">
      <p>This box has a thick 8px yellow border only on the bottom.</p>
    </div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Border width utilities only set the thickness. You still need to set border-style (like solid) and border-color for the border to show.

Use border-0 to remove borders completely.

Combine with responsive prefixes like md:border-4 to change border width on different screen sizes.

Summary

Border width utilities control how thick borders are on elements.

You can set border width on all sides or just one side.

Remember to set border color and style to see the border.