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 =
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" >
< 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 =
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" >
< 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:
Last Updated :
23 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...