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.