Bird
Raised Fist0
Tailwindmarkup~5 mins

Border width utilities in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which Tailwind class sets the border width to 4 pixels on all sides?
easy
A. border-thick
B. border-4
C. border-all-4
D. border-width-4

Solution

  1. Step 1: Understand Tailwind border width classes

    Tailwind uses border-{size} to set border width on all sides.

  2. Step 2: Identify the correct class for 4 pixels

    The class border-4 sets border width to 4 pixels on all sides.

  3. Final Answer:

    border-4 -> Option B

  4. Quick Check:

    border width 4px = border-4 [OK]
Hint: Use border-{number} for all sides border width [OK]
Common Mistakes:
  • Using non-existent classes like border-width-4
  • Confusing border thickness with border style
  • Forgetting to add border color to see the border
2. Which of these is the correct Tailwind class to set only the top border width to 2 pixels?
easy
A. border-top-2
B. border-2t
C. border-2-top
D. border-t-2

Solution

  1. Step 1: Recall Tailwind side-specific border width syntax

    Tailwind uses border-{side}-{width} with short side names: t (top), r (right), b (bottom), l (left).

  2. Step 2: Match the correct class for top border 2 pixels

    border-t-2 correctly sets top border width to 2 pixels.

  3. Final Answer:

    border-t-2 -> Option D

  4. Quick Check:

    Top border 2px = border-t-2 [OK]
Hint: Use border-t-2 for top border width 2px [OK]
Common Mistakes:
  • Writing full words like border-top-2 (not valid)
  • Mixing order like border-2-top
  • Using incorrect abbreviations like border-2t
3. What border width will the following Tailwind class apply?
<div class="border-l-8 border-r-2 border-t border-b-0 border-black border-solid">Content</div>
medium
A. Left: 8px, Right: 2px, Top: 1px, Bottom: 0px
B. Left: 8px, Right: 2px, Top: 0px, Bottom: 1px
C. Left: 2px, Right: 8px, Top: 1px, Bottom: 0px
D. Left: 8px, Right: 2px, Top: 2px, Bottom: 0px

Solution

  1. Step 1: Analyze each border width class

    border-l-8 sets left border 8px, border-r-2 right border 2px, border-t defaults to 1px, border-b-0 bottom border 0px.

  2. Step 2: Confirm border color and style

    border-black and border-solid ensure border is visible with black solid lines.

  3. Final Answer:

    Left: 8px, Right: 2px, Top: 1px, Bottom: 0px -> Option A

  4. Quick Check:

    border-l-8, border-r-2, border-t=1, border-b-0 [OK]
Hint: Remember border-t means 1px by default [OK]
Common Mistakes:
  • Assuming border-t means 0px
  • Mixing left and right widths
  • Ignoring border style or color needed to see border
4. You wrote <div class="border-t-3 border-b-5 border-black">Box</div> but the top border does not appear. What is the likely problem?
medium
A. You need to add border-color for bottom border only
B. border-t-3 is not a valid Tailwind class
C. You must add border-style like border-solid to see borders
D. The border-b-5 class overrides the top border

Solution

  1. Step 1: Check if border style is set

    Tailwind border width classes only set width. Without a border style like border-solid, borders won't show.

  2. Step 2: Confirm border color is set

    border-black sets color, so color is not the issue here.

  3. Final Answer:

    You must add border-style like border-solid to see borders -> Option C

  4. Quick Check:

    Border style missing = no visible border [OK]
Hint: Always add border style like border-solid to show borders [OK]
Common Mistakes:
  • Assuming border width alone shows border
  • Thinking border-t-3 is invalid (it is valid)
  • Believing one border side overrides another
5. You want a responsive border that is 1px on small screens, 4px on medium, and 8px on large screens only on the bottom side. Which Tailwind class set is correct?
hard
A. border-b border-b-1 md:border-b-4 lg:border-b-8
B. border-b-1 sm:border-b-4 md:border-b-8
C. border-b border-b-4 md:border-b-4 lg:border-b-8
D. border-b border-b-1 sm:border-b-4 lg:border-b-8

Solution

  1. Step 1: Understand default and responsive classes

    Use border-b-1 for 1px bottom border by default (small screens). Then md:border-b-4 for medium screens, lg:border-b-8 for large screens.

  2. Step 2: Check for correct syntax and order

    border-b border-b-1 md:border-b-4 lg:border-b-8 correctly uses border-b-1 (default), md:border-b-4, and lg:border-b-8. The border-b class alone sets 1px but is redundant with border-b-1.

  3. Final Answer:

    border-b border-b-1 md:border-b-4 lg:border-b-8 -> Option A

  4. Quick Check:

    Responsive bottom border widths set correctly [OK]
Hint: Use mobile-first classes with md: and lg: prefixes [OK]
Common Mistakes:
  • Using sm: instead of md: for medium screens
  • Missing the default border width class
  • Using invalid class names like border-b-1 (valid but redundant with border-b)