How Do You Remove the Border Top in Tailwind?

To remove the border top in Tailwind CSS, the most direct way is to use the border-t-0 utility class.

Removing Only the Top Border

If you only want to remove the border from the top side of an element while potentially keeping borders on other sides, you should use the specific utility for the top border width.

• border-t-0: This class sets the border-top-width CSS property to 0.

This is the preferred method when you need fine-grained control over individual borders.

<div class="border border-blue-500 border-t-0">
  This div has a border on the right, bottom, and left, but not the top.
</div>

<div class="border-2 border-green-600 border-t-0">
  This div has a thicker border on sides other than the top.
</div>

Removing All Borders Using border-none

Tailwind CSS also provides a utility class to remove borders from all sides of an element simultaneously.

• border-none: This class is equivalent to setting border-width: 0; and border-style: none; for all four sides (top, right, bottom, left).

According to Tailwind documentation, use border-none to remove an existing border style from an element. This is most commonly used to remove a border style that was applied at a smaller breakpoint, for example, removing borders on larger screens that were present on smaller screens.

<div class="border border-red-500 md:border-none">
  This div has a red border by default, but no border on medium screens and up.
</div>

While border-none will remove an existing top border as part of removing all borders, it is not specifically for targeting only the top border if other borders are meant to remain. Use border-t-0 for that specific task.

Comparison Table

Here’s a quick look at the key difference between the two main utilities for removing borders:

Utility Class	Effect	Use Case
border-t-0	Removes the top border only	Removing a specific border side (top)
border-none	Removes borders from all sides	Removing all borders; removing responsive borders

Choose border-t-0 when you only need to affect the top border. Choose border-none when you want to remove all borders, often in a responsive context to override a default or smaller-breakpoint border.