0
0
Tailwindmarkup~5 mins

Border color and style in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Borders help separate parts of a webpage visually. Changing their color and style makes your design clearer and more attractive.

To highlight a button or input field with a colored border.
To separate sections on a page with different border styles.
To show focus or error states by changing border color.
To create boxes or cards with distinct edges.
To add decorative lines around images or text.
Syntax
Tailwind
border-{side?}-{width?} border-{color} border-{style}

border-{side?}-{width?} sets which border and how thick it is (e.g., border for all sides, border-t-2 for top border 2px).

border-{color} sets the border color (e.g., border-red-500).

border-{style} sets the border style like solid, dashed, or dotted (e.g., border-dashed).

Examples
A box with a solid blue border on all sides.
Tailwind
<div class="border border-blue-500 border-solid p-4">Content</div>
Only the top border is thick, red, and dashed.
Tailwind
<div class="border-t-4 border-red-600 border-dashed p-4">Content</div>
Bottom border is thin, green, and dotted.
Tailwind
<div class="border-b-2 border-green-400 border-dotted p-4">Content</div>
Sample Program

This page shows three boxes with different border colors and styles using Tailwind CSS. Each box uses padding and rounded corners for better look.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Border Color and Style Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section class="max-w-md mx-auto space-y-6">
    <div class="border border-blue-500 border-solid p-4 rounded">
      <p>This box has a solid blue border.</p>
    </div>
    <div class="border-t-4 border-red-600 border-dashed p-4 rounded">
      <p>This box has a thick, dashed red top border only.</p>
    </div>
    <div class="border-b-2 border-green-400 border-dotted p-4 rounded">
      <p>This box has a thin, dotted green bottom border only.</p>
    </div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use border-solid, border-dashed, or border-dotted to change border style.

Border colors come from Tailwind's color palette, like border-red-500 or border-green-400.

Combine border side, width, color, and style classes for custom borders.

Summary

Borders separate content and add style.

Tailwind uses simple classes for border color and style.

Mix border side, width, color, and style classes to get the look you want.