Border & Border radius

Border & Border-Radius

In Tailwind, you can apply rounded corners to an element using the rounded utility class. The rounded class alone will give you a border-radius of 0.25rem (4px) for all corners.

If you want to specify different values for different corners, you can use the following utility classes:

• rounded-t to round the top corners

• rounded-r to round the right corners

• rounded-b to round the bottom corners

• rounded-l to round the left corners

You can also use the - symbol to specify which corners you want to round. For example, rounded-tl will round the top-left corner, and rounded-tr-bl will round the top-right and bottom-left corners.

If you want to set a specific border-radius value, you can use the rounded-{size} utility class, where {size} can be one of the following values: none, sm, md, lg, xl, 2xl, 3xl, full. For example, rounded-md will set the border-radius to 0.375rem (6px).

You can also use the rounded-t-{size}, rounded-r-{size}, rounded-b-{size}, and rounded-l-{size} utility classes to set different values for different corners.

Border Width

In Tailwind, you can set the width of an element's border using the border utility class. By default, the border class sets a border width of 1px.

You can also set different border widths using the following utility classes:

• border-0 to remove the border

• border-2 to set a border width of 2px

• border-4 to set a border width of 4px

• border-8 to set a border width of 8px

You can also set a border width for specific sides of an element using the following utility classes:

• border-t to set a border on the top side

• border-r to set a border on the right side

• border-b to set a border on the bottom side

• border-l to set a border on the left side

You can also use the - symbol to specify which sides you want to set a border width for. For example, border-t-2 will set a border of 2px on the top side, and border-l-4 will set a border of 4px on the left side.

You can also use the border-{color} utility class to set the border color. For example, border-red-500 will set the border color to the Tailwind color red-500.