Tailwind Border Width – A Comprehensive Guide

In this article, we will explore the Tailwind border width with examples and show you how to use them to create stunning web designs.

Tailwind border width class specifies the border width of all four sides of an element.

Tailwind Border Width

Four properties make up the border-width property.

There are multiple values that can be assigned to this class in Tailwind CSS.

Each property is covered by a class and It’s an alternative to the CSS border-width property.

Syntax

<element class="border-{number}">....</element>
Table Of Content-

Tailwind Border Width Classes

Classes Overview
border-0This class sets the border width to 0px hence no border is applied to the element.
borderThis class applies a border of 1px to all four sides of an element.
border-2This class applies a border of 2px to all four sides of an element.
border-4This class applies a border of 4px to all four sides of an element.
border-8This class applies a border of 8px to all four sides of an element.
border-x-0By utilizing the border-x-0 class in Tailwind, a border width of both left and right sides of an element is set to 0px.
border-xBy utilizing the border-x class in Tailwind, a border width of 1px applied to both left and right sides of an element.
border-x-2By utilizing the border-x-2 class in Tailwind, a border width of 2px applied to both left and right sides of an element.
border-x-4By utilizing the border-x-4 class in Tailwind, a border width of 4px applied to both left and right sides of an element.
border-x-8By utilizing the border-x-8 class in Tailwind, a border width of 8px applied to both left and right sides of an element.
border-y-0In this case, the border width of top and bottom sides of an element is set to 0px.
border-yIn this case, the border width of top and bottom sides of an element is set to 1px.
border-y-2In this case, the border width of top and bottom sides of an element is set to 2px.
border-y-4In this case, the border width of top and bottom sides of an element is set to 4px.
border-y-8In this case, the border width of top and bottom sides of an element is set to 8px.
border-t-0Using this class, the top side border width of an element is set to 0px.
border-tUsing this class, the top side border width of an element is set to 1px.
border-t-2Using this class, the top side border width of an element is set to 2px.
border-t-4Using this class, the top side border width of an element is set to 4px.
border-t-8Using this class, the top side border width of an element is set to 8px.
border-r-0Elements with this class have a border width of 0px on their right side.
border-rElements with this class have a border width of 1px on their right side.
border-r-2Elements with this class have a border width of 2px on their right side.
border-r-4Elements with this class have a border width of 4px on their right side.
border-r-8Elements with this class have a border width of 8px on their right side.
border-b-0The result of this class is a border width of 0px on the bottom of an element.
border-bThe result of this class is a border width of 1px on the bottom of an element.
border-b-2The result of this class is a border width of 2px on the bottom of an element.
border-b-4The result of this class is a border width of 4px on the bottom of an element.
border-b-8The result of this class is a border width of 8px on the bottom of an element.
border-l-0Using this class, an element’s left side border width is set to 0px.
border-lUsing this class, an element’s left side border width is set to 1px.
border-l-2Using this class, an element’s left side border width is set to 2px.
border-l-4Using this class, an element’s left side border width is set to 4px.
border-l-8Using this class, an element’s left side border width is set to 8px.

This section uses a class to set the border width on all sides of an element.

The classes include border, border-0, border-2, border-4, and border-8.

Syntax

<element class="border-{number}">...</element>

Below example sheds some light on the Tailwind classes that are used to adjust borders on all four sides of an element:

Tailwind Border Width Example: 1 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-2">Border Width Class in Tailwind CSS</p> <div class="mx-4 grid grid-cols-1 gap-2 bg-gray-200 p-4 font-semibold rounded-md"> <div class="border-0 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-0 </div> <div class="border border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border </div> <div class="border-2 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-2 </div> <div class="border-4 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-4 </div> <div class="border-8 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-8 </div> </div> </body> </html>

In this example, let’s explore classes that adjust vertical or horizontal borders only:

Tailwind Border Width Example: 2 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-2">Border Width Class in Tailwind CSS</p> <p class="font-semibold text-gray-400 my-2 text-sm">Vertical and horizontal border width</p> <div class="mx-4 grid grid-cols-2 gap-2 bg-gray-200 p-4 font-semibold rounded-md"> <div class="border-x-0 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-x-0 </div> <div class="border-y-0 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-y-0 </div> <div class="border-x border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-x </div> <div class="border-y border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-y </div> <div class="border-x-2 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-x-2 </div> <div class="border-y-2 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-y-2 </div> <div class="border-x-4 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-x-4 </div> <div class="border-y-4 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-y-4 </div> <div class="border-x-8 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-x-8 </div> <div class="border-y-8 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-y-8 </div> </div> </body> </html>

Below example covers classes that make use of border width on top and bottom borders only:

Tailwind Border Width Example: 3 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-2">Border Width Class in Tailwind CSS</p> <p class="font-semibold text-gray-400 my-2 text-sm">Top and bottom border width</p> <div class="mx-4 grid grid-cols-2 gap-2 bg-gray-200 p-4 font-semibold rounded-md"> <div class="border-t-0 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-t-0 </div> <div class="border-b-0 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-b-0 </div> <div class="border-t border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-t </div> <div class="border-b border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-b </div> <div class="border-t-2 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-t-2 </div> <div class="border-b-2 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-b-2 </div> <div class="border-t-4 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-t-4 </div> <div class="border-b-4 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-b-4 </div> <div class="border-t-8 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-t-8 </div> <div class="border-b-8 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-b-8 </div> </div> </body> </html>

The following example portrays how the left and right border widths are adjusted using the border width class in Tailwind:

Tailwind Border Width Example: 4 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-2">Border Width Class in Tailwind CSS</p> <p class="font-semibold text-gray-400 my-2 text-sm">Left and Right border width</p> <div class="mx-4 grid grid-cols-2 gap-3 bg-gray-200 p-4 font-semibold rounded-md"> <div class="border-r-0 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-r-0 </div> <div class="border-l-0 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-l-0 </div> <div class="border-r border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-r </div> <div class="border-l border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-l </div> <div class="border-r-2 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-r-2 </div> <div class="border-l-2 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-l-2 </div> <div class="border-r-4 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-r-4 </div> <div class="border-l-4 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-l-4 </div> <div class="border-r-8 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-r-8 </div> <div class="border-l-8 border-gray-700 bg-gray-400 w-full h-12 flex justify-center items-center"> border-l-8 </div> </div> </body> </html>

Now you know what Tailwind Border Width is and how it can be used to create an elegant website.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *