Skip to content
Related Articles

Related Articles

Tailwind CSS Border Color

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

This class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS border-color property. This class is used to specify the border color of an element. 

Border Color classes:

  • border-transparent: The border color will be transparent.
  • border-current:  The border will color depend on the parent element color.
  • border-black: The border color will be black.
  • border-white: The border color will be white.
  • border-gray-50: The border color will be gray.
  • border-red-50: The border color will be red.
  • border-blue-50: The border color will be blue.
  • border-indigo-50: The border color will be indigo.
  • border-purple-50: The border color will be purple.
  • border-green-50: The border color will be green.
  • border-yellow-50: The border color will be yellow.
  • border-pink-50: The border color will be pink.

Note: The color’s values can be changeable according to your need from 50-900, the span should be 100, after the 100.

Syntax:

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

Example:

HTML




<!DOCTYPE html> 
<head
    <link href
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"
</head
  
<body class="text-center mx-4"
    <h1 class="text-green-600 text-5xl font-bold"
        GeeksforGeeks 
    </h1
    <b>Tailwind CSS Border Color Class</b
    <div class="mx-14 bg-green-200 grid grid-rows-4 
                grid-flow-col gap-2 text-justify p-2"> 
          
    <p class="border-2 border-transparent p-2"
        A Computer Science Portal for Geeks 
    </p>
   
  
    <p class="border-2 border-current text-red-600 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-white p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-black text-white p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-gray-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-red-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
  
    <p class="border-2 border-indigo-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-blue-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-green-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-yellow-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-pink-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    <p class="border-2 border-purple-700 p-2"
        A Computer Science Portal for Geeks 
    </p>
   
    </div
</body
  
</html


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!