Border color and style in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class sets a solid red border?

You want a solid border with a red color around a box. Which Tailwind CSS class will do this?

A border-red-500 border-dashed

B border-red-500 border-solid

C border-red-500 border-double

D border-red-500 border-none

💡 Hint

Think about the style keyword that means a continuous line.

The border-solid class applies a solid border style. Combined with border-red-500, it creates a solid red border.

❓ rendering

intermediate

What border style will this Tailwind code produce?

Look at this Tailwind CSS code:

<div class="border-4 border-blue-700 border-dotted">Box</div>

What will the border look like?

A A thick blue border with dotted lines

B A thin blue border with solid lines

C A thick blue border with dashed lines

D No border visible

💡 Hint

Check the meaning of border-4 and border-dotted.

border-4 means the border is 4 units thick (thicker than default). border-blue-700 sets the color. border-dotted means the border lines are dots.

🧠 Conceptual

advanced

How does Tailwind apply border color when multiple border color classes are used?

If you write this HTML:

<div class="border border-red-500 border-green-400">Test</div>

What color will the border be and why?

A No border color is applied due to conflict

B Red, because the first border color class takes priority

C Both red and green borders appear side by side

D Green, because the last border color class overrides the previous

💡 Hint

Think about how CSS applies multiple classes with conflicting properties.

In CSS, when multiple classes set the same property, the last one in the class list wins. Tailwind generates CSS classes that set border-color, so border-green-400 overrides border-red-500.

❓ layout

advanced

Which Tailwind classes create a dashed border only on the top side with a custom color?

You want a dashed border only on the top side of a box, colored purple. Which set of classes achieves this?

A border-t-2 border-dotted border-purple-600

B border-2 border-dashed border-t-purple-600

C border-t-2 border-dashed border-purple-600

D border-t-2 border-solid border-purple-600

💡 Hint

Remember how Tailwind names border width and color for specific sides.

border-t-2 sets the top border width to 2 units. border-dashed applies dashed style to all borders, but since only top border has width, only top border is visible dashed. border-purple-600 sets the border color.

❓ accessibility

expert

Why is it important to consider border color contrast in Tailwind designs?

You set a border color using Tailwind classes on a button. Why must you ensure good contrast between border color and background?

A To make sure users with vision impairments can see the border clearly

B Because border colors do not affect accessibility

C To reduce the file size of CSS generated by Tailwind

D Because border colors only matter for printing, not screens

💡 Hint

Think about users who have difficulty seeing colors or low contrast.

Good contrast helps users with vision impairments or color blindness to distinguish borders and understand UI elements. Tailwind colors should be chosen to meet accessibility contrast guidelines.

Practice

1. Which Tailwind class sets the border color to red?

easy

A. border-red-500

B. border-color-red

C. red-border

D. border-red

Solution

1. Step 1: Understand Tailwind color naming

   Tailwind uses color names followed by a number for shade, like red-500.

2. Step 2: Identify correct border color class

   The correct format for border color is border-{color}-{shade}, so border-red-500 is correct.

3. Final Answer:

   border-red-500 -> Option A

4. Quick Check:

   Border color uses border-{color}-{shade} format [OK]

Hint: Use border-color-shade format for colors [OK]

Common Mistakes:

• Using border-color-red which is invalid
• Using just border-red without shade
• Using non-Tailwind class names

2. Which class correctly applies a dashed border style in Tailwind?

easy

A. border-dash

B. border-dashed

C. border-style-dashed

D. dashed-border

Solution

1. Step 1: Recall Tailwind border style classes

   Tailwind uses border-solid, border-dashed, border-dotted for border styles.

2. Step 2: Match correct class

   border-dashed is the correct class to apply dashed border style.

3. Final Answer:

   border-dashed -> Option B

4. Quick Check:

   Border style classes start with border- + style [OK]

Hint: Border styles use border- + style name [OK]

Common Mistakes:

• Using border-dash which is not valid
• Adding extra words like border-style-dashed
• Using non-Tailwind class names

3. What border style and color will this div have?

<div class="border-4 border-blue-700 border-dotted">Content</div>

medium

A. No border visible

B. A thin blue solid border

C. A thick (4px) blue dotted border

D. A thick red dashed border

Solution

1. Step 1: Analyze border width class

   border-4 means border width is 4 pixels, which is thick.

2. Step 2: Analyze border color and style

   border-blue-700 sets a dark blue color, and border-dotted sets dotted style.

3. Final Answer:

   A thick (4px) blue dotted border -> Option C

4. Quick Check:

   Width 4 + blue-700 + dotted = thick blue dotted border [OK]

Hint: Combine width, color, style classes for full border look [OK]

Common Mistakes:

• Ignoring border width and assuming thin border
• Confusing dotted with dashed style
• Mixing up color shades

4. Identify the error in this Tailwind border class usage:

<div class="border-2 border-green border-solid">Box</div>

medium

A. Wrong border style class name

B. Incorrect border width class

C. No error, all classes are correct

D. Missing shade number in border color class

Solution

1. Step 1: Check border color class format

   border-green is incomplete; Tailwind requires a shade like border-green-500.

2. Step 2: Verify other classes

   border-2 and border-solid are valid classes.

3. Final Answer:

   Missing shade number in border color class -> Option D

4. Quick Check:

   Border color needs shade number like -500 [OK]

Hint: Always add shade number to color classes [OK]

Common Mistakes:

• Omitting shade number in color class
• Using invalid style class names
• Confusing border width units

5. You want a responsive border that is solid red on small screens and dashed blue on medium and larger screens. Which class combination achieves this?

hard

A. border border-red-600 border-solid md:border-blue-600 md:border-dashed

B. border border-red-600 border-dashed md:border-blue-600 md:border-solid

C. border border-blue-600 border-solid md:border-red-600 md:border-dashed

D. border border-red-600 md:border-blue-600 border-dashed md:border-solid

Solution

1. Step 1: Set default small screen styles

   Use border-red-600 and border-solid for small screens (default).

2. Step 2: Override on medium screens and up

   Use md:border-blue-600 and md:border-dashed to change color and style on medium+ screens.

3. Final Answer:

   border border-red-600 border-solid md:border-blue-600 md:border-dashed -> Option A

4. Quick Check:

   Default solid red, medium+ dashed blue with md: prefix [OK]

Hint: Use md: prefix to change styles on medium screens [OK]

Common Mistakes:

• Mixing up default and responsive classes order
• Using wrong style classes for screen sizes
• Forgetting to include base border class