Tailwind CSS Border Width

The border-width utility in Tailwind CSS is used to set the width of an element's border.

Syntax

<div class="border-[width]"></div>

• width: Specifies the width of the border. It can be any of the predefined values in the default border width scale - 0, 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, px.

Example

<div class="border-4"></div>

Output

The above example will create a div with a 4-pixel wide border.

Explanation

The border-width utility class in Tailwind CSS sets the border width of an element. The border-width utility can be used alone or in combination with other border utilities such as border-color and border-style to create custom border styles.

Use

The border-width utility in Tailwind CSS is used to set the width of an element's border. You can use the predefined width values in the default border width scale or use custom values using the px unit.

<div class="border-2 border-red-500"></div>

In the above example, we have used both the border-width and border-color utility classes in Tailwind CSS to create a custom border style.

Important Points

• The default values of the border-width utility in Tailwind CSS are 0, 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, and px.

• The border-width utility class can be used alone or in combination with other border utilities such as border-color and border-style to create custom border styles.

• You can set custom border widths by using the px unit.

Summary

The border-width utility in Tailwind CSS is used to set the width of an element's border. You can use the predefined width values in the default border width scale or use custom values using the px unit. The border-width utility can be used alone or in combination with other border utilities such as border-color and border-style to create custom border styles.