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.