Tailwind CSS Border Color

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>
<html>

<head>
    <link href="https://unpkg.com/tailwindcss@1.9.6/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 Border Color

Explore