Skip to content
Related Articles

Related Articles

Tailwind CSS Border Width

Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!