Bird
Raised Fist0
Tailwindmarkup~5 mins

Border color and style in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which Tailwind class sets the border color to red?
easy
A. border-red-500
B. border-color-red
C. red-border
D. border-red

Solution

  1. Step 1: Understand Tailwind color naming

    Tailwind uses color names followed by a number for shade, like red-500.

  2. Step 2: Identify correct border color class

    The correct format for border color is border-{color}-{shade}, so border-red-500 is correct.

  3. Final Answer:

    border-red-500 -> Option A

  4. Quick Check:

    Border color uses border-{color}-{shade} format [OK]
Hint: Use border-color-shade format for colors [OK]
Common Mistakes:
  • Using border-color-red which is invalid
  • Using just border-red without shade
  • Using non-Tailwind class names
2. Which class correctly applies a dashed border style in Tailwind?
easy
A. border-dash
B. border-dashed
C. border-style-dashed
D. dashed-border

Solution

  1. Step 1: Recall Tailwind border style classes

    Tailwind uses border-solid, border-dashed, border-dotted for border styles.

  2. Step 2: Match correct class

    border-dashed is the correct class to apply dashed border style.

  3. Final Answer:

    border-dashed -> Option B

  4. Quick Check:

    Border style classes start with border- + style [OK]
Hint: Border styles use border- + style name [OK]
Common Mistakes:
  • Using border-dash which is not valid
  • Adding extra words like border-style-dashed
  • Using non-Tailwind class names
3. What border style and color will this div have?
<div class="border-4 border-blue-700 border-dotted">Content</div>
medium
A. No border visible
B. A thin blue solid border
C. A thick (4px) blue dotted border
D. A thick red dashed border

Solution

  1. Step 1: Analyze border width class

    border-4 means border width is 4 pixels, which is thick.

  2. Step 2: Analyze border color and style

    border-blue-700 sets a dark blue color, and border-dotted sets dotted style.

  3. Final Answer:

    A thick (4px) blue dotted border -> Option C

  4. Quick Check:

    Width 4 + blue-700 + dotted = thick blue dotted border [OK]
Hint: Combine width, color, style classes for full border look [OK]
Common Mistakes:
  • Ignoring border width and assuming thin border
  • Confusing dotted with dashed style
  • Mixing up color shades
4. Identify the error in this Tailwind border class usage:
<div class="border-2 border-green border-solid">Box</div>
medium
A. Wrong border style class name
B. Incorrect border width class
C. No error, all classes are correct
D. Missing shade number in border color class

Solution

  1. Step 1: Check border color class format

    border-green is incomplete; Tailwind requires a shade like border-green-500.

  2. Step 2: Verify other classes

    border-2 and border-solid are valid classes.

  3. Final Answer:

    Missing shade number in border color class -> Option D

  4. Quick Check:

    Border color needs shade number like -500 [OK]
Hint: Always add shade number to color classes [OK]
Common Mistakes:
  • Omitting shade number in color class
  • Using invalid style class names
  • Confusing border width units
5. You want a responsive border that is solid red on small screens and dashed blue on medium and larger screens. Which class combination achieves this?
hard
A. border border-red-600 border-solid md:border-blue-600 md:border-dashed
B. border border-red-600 border-dashed md:border-blue-600 md:border-solid
C. border border-blue-600 border-solid md:border-red-600 md:border-dashed
D. border border-red-600 md:border-blue-600 border-dashed md:border-solid

Solution

  1. Step 1: Set default small screen styles

    Use border-red-600 and border-solid for small screens (default).

  2. Step 2: Override on medium screens and up

    Use md:border-blue-600 and md:border-dashed to change color and style on medium+ screens.

  3. Final Answer:

    border border-red-600 border-solid md:border-blue-600 md:border-dashed -> Option A

  4. Quick Check:

    Default solid red, medium+ dashed blue with md: prefix [OK]
Hint: Use md: prefix to change styles on medium screens [OK]
Common Mistakes:
  • Mixing up default and responsive classes order
  • Using wrong style classes for screen sizes
  • Forgetting to include base border class