Tailwind CSS Border Color - GeeksforGeeks

23 Mar, 2022
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:
Tailwind CSS
Tailwind-Borders
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?