Tailwind CSS: Single-Side Borders & Box Sizing

1. Single-Side Borders

Top border only. (`border-t-4 border-sky-500`)
Bottom border only. (`border-b-4 border-emerald-500`)
Left border only. (`border-l-4 border-amber-500`)
Right border only. (`border-r-4 border-rose-500`)
Left and Right (x-axis) borders. (`border-x-4 border-indigo-500`)
Top and Bottom (y-axis) borders. (`border-y-4 border-fuchsia-500`)

2. Gotcha: Border Box Sizing

Tailwind CSS globally sets box-sizing: border-box; . This means that an element's border (and padding) is included *within* its specified width and height, rather than adding to it. This is generally the more intuitive behavior.

Box 1 (No Border)

Width: `w-40` (160px)

Height: `h-40` (160px)

Total visual size: 160x160px

Box 2 (With Border)

Width: `w-40` (160px)

Height: `h-40` (160px)

Border: `border-8` (8px)

Total visual size: Still 160x160px (border is internal)

Observe that both boxes above occupy the same overall width and height on the page, even though the second box has a thick border. This is due to box-sizing: border-box .