Border width utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class border-2 do?

It sets the border width of an element to 2 pixels on all sides.

beginner

How do you set only the top border width to 4 pixels using Tailwind CSS?

Use the class border-t-4 to set the top border width to 4 pixels.

beginner

What is the difference between border and border-0 in Tailwind CSS?

border applies a default 1 pixel border width on all sides, while border-0 removes the border by setting its width to 0.

beginner

Which Tailwind CSS class sets the left border width to 8 pixels?

The class border-l-8 sets the left border width to 8 pixels.

intermediate

How can you set different border widths on each side using Tailwind CSS?

Use side-specific classes like border-t-2, border-r-4, border-b-8, and border-l-0 to set different widths on top, right, bottom, and left borders respectively.

Which Tailwind class sets a 1 pixel border on all sides?

A border-4

B border

C border-2

D border-0

border applies a 1 pixel border width on all sides.

What does border-b-0 do?

A Removes bottom border by setting width to 0

B Sets bottom border width to 4 pixels

C Sets bottom border width to 1 pixel

D Sets all borders to 0 width

border-b-0 removes the bottom border by setting its width to 0.

How do you set the right border width to 8 pixels?

A border-8

B border-4

C border-right-8

D border-r-8

border-r-8 sets the right border width to 8 pixels.

Which class sets all borders to zero width?

A border-0

B border-none

C border-zero

D border

border-0 sets the border width to zero on all sides.

If you want a 4 pixel border only on the top, which class do you use?

A border-top-4

B border-4

C border-t-4

D border-b-4

border-t-4 sets the top border width to 4 pixels.

Explain how to set different border widths on each side of an element using Tailwind CSS.

Think about top, right, bottom, and left border classes.

Describe the difference between border and border-0 classes in Tailwind CSS.

One adds a border, the other removes it.