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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Mar, 2022
Like Article
Save Article