Tailwind CSS Border Utilities
Complete Tailwind v4 border utilities reference.
Click any utility to copy the class name.
Border Width
Border Side Width
Apply border width to specific sides, including logical properties for RTL support.
Usage Examples
Card with Border
<div class="border border-gray-200
rounded-lg p-4">
Card content
</div>Focus Ring
<button class="focus:ring-2
focus:ring-blue-500
focus:ring-offset-2">
Click me
</button>List Dividers
<ul class="divide-y divide-gray-200"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Asymmetric Radius
<div class="rounded-t-2xl
rounded-b-none">
Rounded top only
</div>About Tailwind Border Utilities
Tailwind provides comprehensive utilities for styling borders, including width, style, color, and radius.
Ring vs Outline: Rings use box-shadow which doesn't affect layout, while outlines use the CSS outline property.
Logical Properties: Use border-s-*, border-e-*, and rounded-ss-* etc. for RTL language support.
For arbitrary values, use bracket notation: border-[3px] or rounded-[20px]
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow