Open In App

Tailwind CSS Border Width

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads