Skip to content
Related Articles

Related Articles

Tailwind CSS Border Style

Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
Improve Article
Save Article

This class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS border-style property. This class is used for controlling the style of an element’s borders.

Border Style Classes:

  • border-solid
  • border-dashed
  • border-dotted
  • border-double
  • border-none

Syntax:

<element class="border-{style}">...</element>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Border Style Class</b>
      
    <div class="mx-4 grid grid-cols-5 gap-2 bg-green-200 p-2">
      
        <!-- First sub div is not for roundig-->
        <div class="border-4 border-green-900 border-solid
                    bg-green-400 w-full h-12">
            border-solid
        </div>
  
        <div class="border-4 border-green-900 border-dashed
                    bg-green-400 w-full h-12">
            border-dashed
        </div>
  
        <div class="border-4 border-green-900 border-dotted
                    bg-green-400 w-full h-12">
            border-dotted
        </div>
  
        <div class="border-4 border-green-900 border-double
                    bg-green-400 w-full h-12">
            border-double
        </div>
          
        <div class="border-4 border-green-900 border-none
                    bg-green-400 w-full h-12">
            border-none
        </div>
    </div>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!