Border color and style in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a red border to the div.

Tailwind

<div class="border [1] p-4">Hello</div>

Drag options to blanks, or click blank then click option'

Aborder-green-500

Bborder-red-500

Cborder-blue-500

Dborder-yellow-500

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a color other than red.

Forgetting to include the border class for border width.

The class border-red-500 adds a red border color in Tailwind CSS.

2fill in blank

medium

Complete the code to make the border dashed.

Tailwind

<div class="border border-red-500 [1] p-4">Dashed border</div>

Drag options to blanks, or click blank then click option'

Aborder-none

Bborder-solid

Cborder-double

Dborder-dashed

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-solid which is the default solid border.

Using border-none which removes the border.

The class border-dashed changes the border style to dashed in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly add a blue dotted border.

Tailwind

<div class="border border-[1]-500 border-dotted p-4">Blue dotted border</div>

Drag options to blanks, or click blank then click option'

Ablue

Bgreen

Cred

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color other than blue.

Leaving the color part blank.

The color part of the class should be blue to get a blue border color.

4fill in blank

hard

Fill both blanks to create a green double border with medium thickness.

Tailwind

<div class="border-[1] border-[2]-500 border-double p-4">Green double border</div>

Drag options to blanks, or click blank then click option'

A4

B2

Cgreen

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-4 which is thicker than medium.

Using wrong color like red.

border-2 sets medium border thickness and border-green-500 sets the green color.

5fill in blank

hard

Fill all three blanks to create a thick, yellow, solid border.

Tailwind

<div class="border-[1] border-[2]-500 border-[3] p-4">Thick yellow solid border</div>

Drag options to blanks, or click blank then click option'

A1

Byellow

Csolid

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using thin border thickness like border-1.

Choosing wrong color or style.

border-8 sets a thick border, border-yellow-500 sets yellow color, and border-solid sets solid style.

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