Border width utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class sets a border width of 4 pixels?

Select the Tailwind CSS class that applies a 4px border width to an element.

A border-4

B border-2

C border-8

D border

💡 Hint

Tailwind uses numbers to represent pixel values for border widths, like 1, 2, 4, 8.

The class border-4 sets the border width to 4 pixels. border-2 sets 2 pixels, border-8 sets 8 pixels, and border sets the default 1 pixel.

❓ rendering

intermediate

What visual border width will this element have?

<div class="border-t-0 border-r-2 border-b-4 border-l-8">Box</div>

Look at the border width classes on each side of the box. What is the width of the bottom border in pixels?

A 0 pixels

B 4 pixels

C 2 pixels

D 8 pixels

💡 Hint

The class border-b-4 sets the bottom border width.

The class border-b-4 sets the bottom border width to 4 pixels. Other sides have different widths.

🧠 Conceptual

advanced

Which Tailwind class removes the border width completely on all sides?

You want no visible border on your element. Which class should you use?

A border-none

B border-transparent

C border-0

D border-hidden

💡 Hint

Think about how Tailwind sets border widths to zero.

The class border-0 sets the border width to zero on all sides, effectively removing the border width. border-none sets border-style: none but does not affect width. border-transparent makes the border invisible but still takes space. border-hidden is invalid.

❓ accessibility

advanced

Why is it important to use border width utilities carefully for accessibility?

Choose the best reason why setting very thin or no borders might affect accessibility.

A Thin or missing borders can make focus outlines hard to see for keyboard users.

B Borders do not affect accessibility at all.

C Thick borders always cause screen readers to crash.

D Borders control font size and can confuse users.

💡 Hint

Think about how users who navigate with keyboards see focus outlines.

Thin or missing borders can make it difficult for keyboard users to see which element is focused. Proper border width helps highlight focus states for accessibility.

📝 Syntax

expert

What error occurs if you write this Tailwind class incorrectly?

<div class="border-4px">Box</div>

The class border-4px is used to set border width. What happens when you use this class in Tailwind CSS?

A The border width is set to 0 pixels.

B The border width is set to 4 pixels correctly.

C Tailwind throws a build error and stops compiling.

D The class is ignored; no border width is applied.

💡 Hint

Tailwind uses specific class names without units like 'px'.

Tailwind does not recognize border-4px because it expects border-4 without units. The class is ignored, so no border width is applied.

Practice

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)