Tailwind CSS Borders — Width, Color, Radius, and Style

In this tutorial, you will learn about Tailwind CSS Borders. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS border utilities provide complete control over border width, color, radius, and style with directional variants (border-t-, border-b-, border-l-, border-r-) and responsive prefixes.

What You'll Learn

You will learn how to apply borders with different widths and colors, use rounded corners at various sizes, control individual border sides, and combine border utilities with other styling classes.

Why It Matters

Borders define containment and visual separation. DodaTech's card components use border utilities for subtle outlines, rounded corners for modern design, and bottom borders for tab indicators.

Real-World Use

Doda Browser uses border-b-2 border-blue-500 for active tab indicators, rounded-lg for cards and modals, and border-gray-200 for subtle dividers between settings rows.

flowchart LR
    A[Backgrounds] --> B[Borders]
    B --> C[Border Width]
    B --> D[Border Color]
    B --> E[Border Radius]
    B --> F[Directional]
    B --> G[Divide]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Border Width

<div class="grid grid-cols-4 gap-4 p-4">
  <div class="border-0 p-4 text-center bg-gray-50">border-0</div>
  <div class="border-2 border-gray-400 p-4 text-center">border-2</div>
  <div class="border-4 border-gray-400 p-4 text-center">border-4</div>
  <div class="border-8 border-gray-400 p-4 text-center">border-8</div>
</div>

<!-- Directional borders -->
<div class="grid grid-cols-2 gap-4 p-4 mt-4">
  <div class="border-t-4 border-blue-500 p-4">border-t-4</div>
  <div class="border-b-4 border-green-500 p-4">border-b-4</div>
  <div class="border-l-4 border-purple-500 p-4">border-l-4</div>
  <div class="border-r-4 border-orange-500 p-4">border-r-4</div>
</div>

Expected output: Top row shows increasing border width. Bottom row shows borders applied to individual sides with different colors.

Border Colors

<div class="grid grid-cols-4 gap-4 p-4">
  <div class="border-2 border-blue-500 p-4 rounded">Blue</div>
  <div class="border-2 border-green-500 p-4 rounded">Green</div>
  <div class="border-2 border-red-500 p-4 rounded">Red</div>
  <div class="border-2 border-yellow-500 p-4 rounded">Yellow</div>
  <div class="border-2 border-purple-500 p-4 rounded">Purple</div>
  <div class="border-2 border-pink-500 p-4 rounded">Pink</div>
  <div class="border-2 border-gray-300 p-4 rounded">Gray</div>
  <div class="border-2 border-indigo-500 p-4 rounded">Indigo</div>
</div>

Expected output: Eight boxes with 2px borders in different semantic colors, all with rounded corners.

Border Radius

<div class="grid grid-cols-4 gap-4 p-4">
  <div class="border-2 border-gray-400 rounded-none p-4 text-center">rounded-none</div>
  <div class="border-2 border-gray-400 rounded-sm p-4 text-center">rounded-sm</div>
  <div class="border-2 border-gray-400 rounded p-4 text-center">rounded</div>
  <div class="border-2 border-gray-400 rounded-md p-4 text-center">rounded-md</div>
  <div class="border-2 border-gray-400 rounded-lg p-4 text-center">rounded-lg</div>
  <div class="border-2 border-gray-400 rounded-xl p-4 text-center">rounded-xl</div>
  <div class="border-2 border-gray-400 rounded-2xl p-4 text-center">rounded-2xl</div>
  <div class="border-2 border-gray-400 rounded-3xl p-4 text-center">rounded-3xl</div>
</div>

Expected output: Eight boxes showing the radius scale from none (0) to 3xl (1.5rem / 24px).

Border Style

<div class="grid grid-cols-4 gap-4 p-4">
  <div class="border-2 border-solid border-gray-400 p-4 text-center">
    border-solid
  </div>
  <div class="border-2 border-dashed border-gray-400 p-4 text-center">
    border-dashed
  </div>
  <div class="border-2 border-dotted border-gray-400 p-4 text-center">
    border-dotted
  </div>
  <div class="border-2 border-double border-gray-400 p-4 text-center">
    border-double
  </div>
</div>

Expected output: Four boxes showing solid, dashed, dotted, and double border styles.

Divide Utilities

<div class="divide-y divide-gray-200 max-w-md mx-auto border rounded-lg overflow-hidden">
  <div class="p-4">Item 1 - divided below</div>
  <div class="p-4">Item 2 - divided below</div>
  <div class="p-4">Item 3 - divided below</div>
  <div class="p-4">Item 4 - final item</div>
</div>

<div class="flex divide-x divide-gray-300 mt-6 max-w-md mx-auto border rounded-lg">
  <div class="p-4 flex-1 text-center">Tab 1</div>
  <div class="p-4 flex-1 text-center">Tab 2</div>
  <div class="p-4 flex-1 text-center">Tab 3</div>
</div>

Expected output: Top: vertical list with border-bottom dividers. Bottom: horizontal tab bar with border-right dividers.

Common Mistakes

1. Border Without Width

border-blue-500 alone does nothing. Always pair with border, border-2, border-4, or border-8.

2. Overusing rounded-full

rounded-full creates pill shapes. Use it for badges and buttons, not for cards or containers that need squared corners.

3. Not Using Divide Utilities

Adding individual border-b to every list item creates repetitive code. Use divide-y on the parent for clean dividers.

4. Forgetting Collapse on Tables

Tables with borders need border-collapse to avoid double borders between cells. Add it alongside border utilities.

5. Mixing Border and Ring

Border uses the CSS border property. Ring uses box-shadow. They can be combined but understand the technical difference for debugging.

Practice Questions

1. What is the difference between border and border-2? border is 1px width. border-2 is 2px width. Available widths: 0, 2, 4, 8.

2. How do you round only the top corners? rounded-t-lg rounds the top-left and top-right corners.

3. What utility creates horizontal dividers between flex children? divide-x-* creates vertical dividers between flex items in a row.

4. How do you make a circular element? rounded-full on a square element (equal width and height) creates a circle.

5. Can borders be responsive? Yes: md:border-4 lg:border-8 changes border width at breakpoints.

Challenge

Build a tab navigation component with 4 tabs. Use border-b for the active tab indicator, divide-x for tab separators, rounded-t-lg for top corners, and hover border color changes.

FAQ

Mini Project

Build a profile card with: a bordered avatar (rounded-full with ring), card container (rounded-xl with shadow and subtle border), stats row (divided by border-r), and a bottom action area (border-t with padding).

What's Next

Now master Flexbox for one-dimensional layouts. Combine border and flex utilities to build navigation bars and card grids.