Border color and style in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What Tailwind class sets the border color to blue?

Use border-blue-500 to set the border color to a medium blue shade.

beginner

How do you make a border dashed using Tailwind?

Use the class border-dashed to change the border style to dashed.

beginner

Which Tailwind class removes the border?

Use border-0 to remove the border completely.

intermediate

How to set a thick solid border in Tailwind?

Combine border-4 for thickness and border-solid for style.

intermediate

What is the Tailwind class to set a red border color with a dotted style?

Use border-red-600 for red color and border-dotted for dotted style.

Which Tailwind class sets the border color to green?

A border-blue-500

B border-yellow-500

C border-red-500

D border-green-500

The class border-green-500 sets the border color to a medium green shade.

How do you make a border solid in Tailwind?

A border-dotted

B border-solid

C border-dashed

D border-none

The class border-solid sets the border style to solid.

Which class removes the border in Tailwind?

A border-transparent

B border-none

C border-0

D border-hidden

border-0 removes the border by setting its width to zero.

What does border-2 do in Tailwind?

A Sets border width to 2 units defined by Tailwind

B Sets border width to 2 rem

C Sets border width to 2 pixels

D Sets border color to level 2

border-2 sets the border width to a size defined by Tailwind's spacing scale, not pixels or rem.

Which class combination sets a red dotted border?

A border-red-600 border-dotted

B border-red-600 border-solid

C border-blue-600 border-dotted

D border-red-600 border-dashed

Use border-red-600 for red color and border-dotted for dotted style.

Explain how to change both the border color and style using Tailwind classes.

Think about how you add multiple classes to one HTML element.

Describe how to make a thick, solid, blue border using Tailwind.

Combine thickness, style, and color classes.