Tailwind CSS - Border Style

Previous
Quiz
Next

Tailwind CSS Border Style is predefined classes that allow you to easily set different styles for borders on elements, including their width, style (such as solid, dashed, or dotted), and radius.

Tailwind CSS Border Style Classes

Below is a list of Tailwind CSS border style classes with properties that enable various border styles for elements.

Class CSS Properties
border-solid border-style: solid;
border-dashed border-style: dashed;
border-dotted border-style: dotted;
border-double border-style: double;
border-hidden border-style: hidden;
border-none border-style: none;

Functionality of Tailwind CSS Border Style Classes

  • border-solid: Applies a solid border around the element.
  • border-dashed: Applies a dashed border around the element.
  • border-dotted: Applies a dotted border around the element.
  • border-double: Applies a double border around the element.
  • border-hidden: Hides the border, making it invisible.
  • border-none: Removes the border, making it non-existent.

Tailwind CSS Border Style Class Examples

Below are examples of Tailwind CSS Border Style classes that show different border styles such as solid lines, dots, dashed, and more.

Define Border Styles

This example shows how to use Tailwind CSS border style classes to apply different border styles to HTML elements.

Example

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Style
    </h2>
    <p class="p-4 border-4 border-solid border-blue-500 mb-4">
        Solid Border
    </p>
    <p class="p-4 border-4 border-dashed border-green-500 mb-4">
        Dashed Border
    </p>
    <p class="p-4 border-4 border-dotted border-red-500 mb-4">
        Dotted Border
    </p>
    <p class="p-4 border-4 border-double border-yellow-500">
        Double Border
    </p>
</body>

</html>

Conditional Border Styles

This example shows how Tailwind CSS border style classes can be used to change border styles when you hover over the elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Style
    </h2>
    <div class="p-4 border-4 border-dashed border-green-500 mb-4 
        hover:border-dotted hover:border-red-500">
        Dashed Border - Hover to Change to Dotted Yellow
    </div>
    <div class="p-4 border-4 border-dotted border-pink-600 
        mb-4 hover:border-solid hover:border-blue-500">
        Dotted Border - Hover to Change to Solid Blue
    </div>
    <div class="p-4 border-4 border-double border-yellow-500 
        hover:border-none">
        Double Border - Hover to Remove Border 
    </div>
</body> 

</html>
Print Page
Previous
Next