Tailwind CSS - Border Width

Previous
Quiz
Next

Tailwind CSS Border Width consists of predefined classes to quickly adjust the border thickness of elements, ranging from thin to thick. You can easily apply these thicknesses to all four sides of an element.

Tailwind CSS Border Width Classes

Below is a list of Tailwind CSS Border Width classes and properties, showing how to adjust border thickness with classes.

Class CSS Properties
border-0 border-width: 0px;
border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;
border border-width: 1px;
border-x-0 border-left-width: 0px;
border-right-width: 0px;
border-x-2 border-left-width: 2px;
border-right-width: 2px;
border-x-4 border-left-width: 4px;
border-right-width: 4px;
border-x-8 border-left-width: 8px;
border-right-width: 8px;
border-x border-left-width: 1px;
border-right-width: 1px;
border-y-0 border-top-width: 0px;
border-bottom-width: 0px;
border-y-2 border-top-width: 2px;
border-bottom-width: 2px;
border-y-4 border-top-width: 4px;
border-bottom-width: 4px;
border-y-8 border-top-width: 8px;
border-bottom-width: 8px;
border-y border-top-width: 1px;
border-bottom-width: 1px;
border-s-0 border-inline-start-width: 0px;
border-s-2 border-inline-start-width: 2px;
border-s-4 border-inline-start-width: 4px;
border-s-8 border-inline-start-width: 8px;
border-s border-inline-start-width: 1px;
border-e-0 border-inline-end-width: 0px;
border-e-2 border-inline-end-width: 2px;
border-e-4 border-inline-end-width: 4px;
border-e-8 border-inline-end-width: 8px;
border-e border-inline-end-width: 1px;
border-t-0 border-top-width: 0px;
border-t-2 border-top-width: 2px;
border-t-4 border-top-width: 4px;
border-t-8 border-top-width: 8px;
border-t border-top-width: 1px;
border-r-0 border-right-width: 0px;
border-r-2 border-right-width: 2px;
border-r-4 border-right-width: 4px;
border-r-8 border-right-width: 8px;
border-r border-right-width: 1px;
border-b-0 border-bottom-width: 0px;
border-b-2 border-bottom-width: 2px;
border-b-4 border-bottom-width: 4px;
border-b-8 border-bottom-width: 8px;
border-b border-bottom-width: 1px;
border-l-0 border-left-width: 0px;
border-l-2 border-left-width: 2px;
border-l-4 border-left-width: 4px;
border-l-8 border-left-width: 8px;
border-l border-left-width: 1px;

Functionality Of Tailwind CSS Border Width Classes

  • border-*-0: Sets the border width to 0 pixels.
  • border-*-2: Sets the border width to 2 pixels.
  • border-*-4: Sets the border width to 4 pixels.
  • border-*-8: Sets the border width to 8 pixels.
  • border: Sets the border width to 1 pixel on all sides.

Replace '*' with specific sides (e.g., x, y, s, e, t, r, b, l) where:

  • border-x: Sets the border width for the left and right sides.
  • border-y: Sets the border width for the top and bottom.
  • border-s: Sets the border width for the inline start side (left in left-to-right text directions).
  • border-e: Sets the border width for the inline end side (right in left-to-right text directions).
  • border-t: Sets the border width for the top.
  • border-r: Sets the border width for the right.
  • border-b: Sets the border width for the bottom.
  • border-l: Sets the border width for the left.

Tailwind CSS Border Width Class Examples

Below are examples of Tailwind CSS Border Width classes that show how to easily adjust the thickness of borders on your elements.

Setting Border Width

This example shows how to use different Tailwind CSS border width classes to set various thicknesses for different sides of a box.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Border Width
    </h2> 
   <h3> Combined Border Width Classes</h3>
    <div class="border-t-4 border-r-2 border-b-4 
    border-l-8 border-blue-700 p-4">
        This div has:
        <ul>
            <li>4-pixel border at the top</li>
            <li>2-pixel border on the right</li>
            <li>4-pixel border at the bottom</li>
            <li>8-pixel border on the left</li>
        </ul>
    </div>
</body>

</html>

Border Widths on Specific Sides

This example shows how Tailwind CSS border width classes can be used to apply different border widths to each side of an element. You can target individual sides such as left, right, top, and bottom.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Width
    </h2>
    <p class="text-xl font-bold mb-4">
        Applying different Border Width Classes:
    </p>
    <div class="grid grid-cols-4 gap-4 mb-6">
        <div>
            <p class="underline font-bold">border-x-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-x-4 bg-gray-300">
                Left & Right: 4px</div>
        </div>
        <div>
            <p class="underline font-bold">border-y-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-y-4  bg-gray-300">
                Top & Bottom: 4px
            </div>
        </div>
        <div>
            <p class="underline font-bold">border-s-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-s-4  bg-gray-300">
                Start 4px
            </div>
        </div>
        <div>
            <p class="underline font-bold">border-e-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-e-4  bg-gray-300">
                End 4px
            </div>
        </div>
</body>

</html>

Different Border Width to Individual Sides

This example shows how to apply border width to a single side of an element using Tailwind CSS border width classes. You can control the thickness of the top, bottom, left, or right borders individually.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Width
    </h2>
    <p class="text-xl font-bold mb-4">
        Single-Side Border Width Examples
    </p>
    <div class="grid grid-cols-4 gap-4 mb-6">
        <div>
            <p class="underline font-bold mb-2 
                text-center">border-t-4</p>
            <div class="w-20 h-20 border-t-4 
                border-blue-600  bg-gray-300">
                 Top: 4px 
             </div>
         </div>
        <div>
            <p class="underline font-bold">border-b-4</p>
            <div class="w-20 h-20 bg-gray-300 border-red-600 
                border-b-4 ">Bottom: 4px</div>
        </div>
        <div>
            <p class="underline font-bold">border-r-4</p>
            <div class="w-20 h-20 border-green-600 
                border-r-4  bg-gray-300">
                Right: 4px
            </div>
        </div>
        <div>
            <p class="underline font-bold">border-l-4</p>
            <div class="w-20 h-20 border-pink-600 
                border-l-4  bg-gray-300">
                Left: 4px
            </div>
        </div>
    </div>
</body>

</html>

Borders Applied to Divide Sections

This example shows different border widths and colors to separate sections in a layout. Each sentence uses different thickness and colors to highlight the divisions.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="p-4 bg-gray-100">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Width
    </h2>
    <h2 class="text-xl font-bold mb-6">
        Borders Applied to Divide Sections
    </h2>
    <div class="max-w-md mx-auto bg-white shadow-lg ">
        <div class="p-4 border-b-2 border-blue-500">
            <h3 class="text-lg font-semibold">Section 1</h3>
            <p>This section has a 2-pixel thick blue 
                border at the bottom.
            </p>
        </div> 
        
        <div class="p-4 border-b-4 border-green-500">
            <h3 class="text-lg font-semibold">Section 2</h3>
            <p>This section has a 4-pixel 
                thick green border at the bottom.
            </p>
        </div> 
        
        <div class="p-4 border-b-8 border-red-500">
            <h3 class="text-lg font-semibold">Section 3</h3>
            <p>This section has an 8-pixel 
                thick red border at the bottom.
            </p>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next