Tailwind CSS Borders

Borders are important tools for defining element outlines, separating content, and creating visual hierarchy. Tailwind provides a complete set of utility classes to finely control every aspect of borders.

Border Width

Use border-{width} utility classes to set the border width for all four directions.

• border-0: border-width: 0px;
• border: border-width: 1px; (most commonly used)
• border-2, border-4, border-8

You can also set the border width for a specific direction:

• border-t-2: Top border
• border-r-4: Right border
• border-b-8: Bottom border
• border-l-0: Left border

<div class="border-2 ...">...</div>
<div class="border-b-4 ...">...</div>

Border Color

Use border-{color} to set the border color. You can use any color from the color palette.

<input class="border-2 border-sky-500 ...">

<!-- Change border color on hover -->
<button class="border border-slate-300 hover:border-slate-400 ...">
  Save Changes
</button>

Similar to background colors, you can also use border-opacity-{amount} to control the opacity of the border color.

Border Style

Use border-{style} to set the border style.

• border-solid: (default) Solid line
• border-dashed: Dashed line
• border-dotted: Dotted line
• border-double: Double solid line
• border-none: No border

<div class="border-4 border-dashed border-gray-200 ...">...</div>

Border Radius

Use rounded-{radius} to add rounded corners to elements.

• rounded-none: No rounded corners
• rounded-sm: Small rounded corners
• rounded: Standard rounded corners
• rounded-md: Medium rounded corners
• rounded-lg: Large rounded corners
• rounded-xl, rounded-2xl, rounded-3xl
• rounded-full: Fully rounded, commonly used for creating circular avatars.

You can also set rounded corners for each corner individually:

• rounded-t-lg: Set rounded corners for only the top two corners.
• rounded-r-xl: Set rounded corners for only the right two corners.
• rounded-bl-2xl: Set rounded corners for only the bottom-left corner.
• rounded-tr-full: Set rounded corners for only the top-right corner.

<img class="rounded-full w-24 h-24" src="...">
<div class="rounded-t-lg bg-white shadow-md">...</div>

Divide

When you have a group of elements and want to add borders between them as dividers, you can use divide-{x|y}-{width} and divide-{color}.

• divide-y: Add horizontal dividers between vertically arranged elements.
• divide-x: Add vertical dividers between horizontally arranged elements.

<div class="flex flex-col divide-y divide-gray-200">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

This is much more convenient than adding border-b to each element individually because it automatically skips the last element.

Through these border tools, you can precisely add clear outlines and dividers to your components and layouts.