Tailwind CSS Border Width
This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS border-width property. This class is used to set the border width of all four sides of an element. The border-width property is the combination of four property
Border Width Classes:
- border
- border-0
- border-2
- border-4
- border-8
- border-t
- border-t-0
- border-t-2
- border-t-4
- border-t-8
- border-r
- border-r-0
- border-r-2
- border-r-4
- border-r-8
- border-b
- border-b-0
- border-b-2
- border-b-4
- border-b-8
- border-l
- border-l-0
- border-l-2
- border-l-4
- border-l-8
All sides: In this section class has been used to set the border width for all sides of an element. The classes are border, border-0, border-2, border-4, and border-8.
Syntax:
<element class="border-{number}">...</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 Width 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-0 border-green-900 bg-green-400 w-full h-12"> border-0 </div> <div class="border border-green-900 bg-green-400 w-full h-12"> border </div> <div class="border-2 border-green-900 bg-green-400 w-full h-12"> border-2 </div> <div class="border-4 border-green-900 bg-green-400 w-full h-12"> border-4 </div> <div class="border-8 border-green-900 bg-green-400 w-full h-12"> border-8 </div> </div> </body> </html> |
Output:
Individual sides: In this section, class has been used to set the border width for individual sides of an element. The classes are the border-{side}-0, border-{side}-2, border-{side}-4, border-{side}-8, and border-{side}.
Syntax:
<element class="border-{side}-{number}">...</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 Width Class</b> <div class="mx-4 grid grid-cols-4 gap-2 bg-green-200 p-2"> <!-- First sub div is not for roundig--> <div class="border-b-2 border-green-900 bg-green-400 w-full h-12"> border-b-2 </div> <div class="border-r-2 border-green-900 bg-green-400 w-full h-12"> border-r-2 </div> <div class="border-l-2 border-green-900 bg-green-400 w-full h-12"> border-l-2 </div> <div class="border-t-2 border-green-900 bg-green-400 w-full h-12"> border-t-2 </div> </div> </body> </html> |
Output:
Please Login to comment...