Tailwind CSS Border Style
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:
Please Login to comment...