Borders

Border utilities for controlling border width, sides, radius, colors, and dividers.

Border Width

Add borders to elements with different widths.

HTML

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

Border Sides

Add borders to specific sides of an element.

HTML

<div class="border-t">...</div>
<div class="border-r">...</div>
<div class="border-b">...</div>
<div class="border-l">...</div>

<!-- Multiple sides -->
<div class="border-x">...</div>
<div class="border-y">...</div>

Border Radius

Add rounded corners to elements.

HTML

<div class="rounded-sm">...</div>
<div class="rounded">...</div>
<div class="rounded-md">...</div>
<div class="rounded-lg">...</div>
<div class="rounded-xl">...</div>
<div class="rounded-full">...</div>

Border Colors

Change the color of borders.

HTML

<div class="border border-gray-300">...</div>
<div class="border border-blue-500">...</div>
<div class="border border-green-500">...</div>
<div class="border border-red-500">...</div>

Divide

Add borders between child elements.

HTML

<div class="divide-y divide-gray-300">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>