Open In App

Tailwind CSS Border Style

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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
  • border-hidden

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 class="border-4 border-green-900 border-hidden
                    bg-green-400 w-full h-12">
            border-hidden
        </div>
       
    </div>
</body>
 
</html>


Output:



Last Updated : 17 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads