Bird
Raised Fist0
Tailwindmarkup~5 mins

Border width utilities in Tailwind - Cheat Sheet & Quick Revision

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
Recall & Review
beginner
What does the Tailwind CSS class border-2 do?
It sets the border width of an element to 2 pixels on all sides.
Click to reveal answer
beginner
How do you set only the top border width to 4 pixels using Tailwind CSS?
Use the class border-t-4 to set the top border width to 4 pixels.
Click to reveal answer
beginner
What is the difference between border and border-0 in Tailwind CSS?
border applies a default 1 pixel border width on all sides, while border-0 removes the border by setting its width to 0.
Click to reveal answer
beginner
Which Tailwind CSS class sets the left border width to 8 pixels?
The class border-l-8 sets the left border width to 8 pixels.
Click to reveal answer
intermediate
How can you set different border widths on each side using Tailwind CSS?
Use side-specific classes like border-t-2, border-r-4, border-b-8, and border-l-0 to set different widths on top, right, bottom, and left borders respectively.
Click to reveal answer
Which Tailwind class sets a 1 pixel border on all sides?
Aborder-4
Bborder
Cborder-2
Dborder-0
What does border-b-0 do?
ARemoves bottom border by setting width to 0
BSets bottom border width to 4 pixels
CSets bottom border width to 1 pixel
DSets all borders to 0 width
How do you set the right border width to 8 pixels?
Aborder-8
Bborder-4
Cborder-right-8
Dborder-r-8
Which class sets all borders to zero width?
Aborder-0
Bborder-none
Cborder-zero
Dborder
If you want a 4 pixel border only on the top, which class do you use?
Aborder-top-4
Bborder-4
Cborder-t-4
Dborder-b-4
Explain how to set different border widths on each side of an element using Tailwind CSS.
Think about top, right, bottom, and left border classes.
You got /3 concepts.
    Describe the difference between border and border-0 classes in Tailwind CSS.
    One adds a border, the other removes it.
    You got /2 concepts.

      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)