Tutorials


Border Width, Style, and Color in Tailwind CSS


Border Width, Style, and Color in Tailwind CSS

Tailwind CSS provides utilities to control border widths, styles, and colors. These utilities help you design and style the borders of elements with precision and consistency.

1. Border Width Utilities

Border width utilities control the thickness of the borders around elements. Tailwind offers several predefined width classes, and you can also customize these in your configuration.

Utility Classes

  • border-{width}: Sets the border width of an element.

Common Border Widths:

  • border-0: No border.
  • border-2: Border width of 2px.
  • border-4: Border width of 4px.
  • border-8: Border width of 8px.

Example Usage:

No Border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>No Border Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-0 p-4">
    No border around this element.
  </div>
</body>
</html>

2px Border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2px Border Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-2 border-gray-500 p-4">
    This element has a 2px border.
  </div>
</body>
</html>

2. Border Style Utilities

Border style utilities control the type of border applied to elements. Tailwind offers several predefined styles.

Utility Classes

  • border-solid: Applies a solid border.
  • border-dashed: Applies a dashed border.
  • border-dotted: Applies a dotted border.
  • border-double: Applies a double border.
  • border-none: Removes the border.

Example Usage:

Solid Border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solid Border Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-2 border-solid border-gray-500 p-4">
    This element has a solid border.
  </div>
</body>
</html>

Dotted Border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dotted Border Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-2 border-dotted border-gray-500 p-4">
    This element has a dotted border.
  </div>
</body>
</html>

3. Border Color Utilities

Border color utilities control the color of the borders. Tailwind CSS provides a wide range of color classes that can be applied to borders.

Utility Classes

  • border-{color}: Sets the border color using Tailwind's color palette or custom colors.

Common Colors:

  • border-gray-500: Gray border.
  • border-blue-500: Blue border.
  • border-red-500: Red border.

Example Usage:

Gray Border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gray Border Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-4 border-gray-500 p-4">
    This element has a gray border.
  </div>
</body>
</html>

Blue Border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blue Border Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-4 border-blue-500 p-4">
    This element has a blue border.
  </div>
</body>
</html>

Combining Border Utilities

You can combine border width, style, and color utilities to achieve the desired border appearance.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Combined Border Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-4 border-dashed border-blue-500 p-4">
    This element has a 4px dashed blue border.
  </div>
</body>
</html>

Summary

  • Border Width Utilities:

    • border-{width}: Defines the border width (e.g., border-0, border-2, border-4, border-8).

  • Border Style Utilities:

    • border-solid: Solid border.
    • border-dashed: Dashed border.
    • border-dotted: Dotted border.
    • border-double: Double border.
    • border-none: No border.

  • Border Color Utilities:

    • border-{color}: Defines the border color using Tailwind’s color palette or custom colors.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about