Borders
Add and color borders with border and border-* utilities.
Syntax
class="border-2 border-cyan-500"Add a border with border (1px) or sized versions like border-2, border-4. Color it with border-{color} and pick sides with border-t, border-b, etc.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer outlines an input field with a gray border using border border-gray-300 and makes it turn blue on focus.
- A divider between sections is added using a div with border-t border-gray-200 instead of an hr element.
- A card is distinguished from its background by a subtle one-pixel border using border border-gray-100 rather than a shadow.
More examples
Basic border on input
border adds a 1px solid border; border-gray-300 colors it; focus:border-indigo-500 shifts the color to indigo when the field is active.
<input
type="text"
class="border border-gray-300 rounded px-3 py-2 w-full
focus:border-indigo-500 focus:outline-none"
placeholder="Enter value"
/>Horizontal divider
border-t applies a top border only, turning the div into a horizontal rule that separates content sections.
<section class="py-8">
<p>First section</p>
</section>
<div class="border-t border-gray-200"></div>
<section class="py-8">
<p>Second section</p>
</section>Colored and thick border
border-l-4 adds a 4px left border only; combining it with a tinted background creates a callout box pattern common in documentation.
<div class="border-l-4 border-indigo-500 bg-indigo-50 p-4 rounded-r">
<p class="text-indigo-900 font-medium">Info</p>
<p class="text-indigo-700 text-sm mt-1">This is an informational callout.</p>
</div>
Discussion