border-t

Tailwind CSS border width utility for controlling element borders. The border-t class applies a border on the top side only.

Class Information

CSS Class

border-t

CSS Properties

border-top-width: 1px;
border-style: solid;

Live Examples

Border Width Examples

Content

1px border on top only

<div class="border-t border-blue-500">
  Content
</div>

All Border Width Options

Default (All Sides)

00px
22px
44px
66px
88px

Top

t
t-2

Bottom

b
b-4

Left/Right

l
r

X/Y Axis

x
y

Start/End

s
e

Usage Guidelines

✅ Common Use Cases:

  • border-0: Remove borders completely
  • border (1px): Default thin borders for cards, inputs
  • border-2: Medium borders for emphasis
  • border-4: Thick borders for strong visual separation
  • border-8: Very thick borders for design elements
  • Directional borders: Create dividers and separators

💡 Pro Tips:

  • Combine with border colors: border-2 border-blue-500
  • Use directional borders for dividers: border-r border-gray-300
  • Focus states: focus:border-2 focus:border-blue-500
  • Responsive borders: border md:border-2
  • X/Y axis for symmetric borders: border-x-2
  • Start/End for RTL support: border-s-2