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.