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.

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