Tailwind CSS Border Color

Tailwind CSS provides utility classes to set the color of an element's border. These classes are an alternative to the CSS border-color property. You can apply a color to all four borders, individual sides, or specific pairs of sides.

border-transparent: Makes the border transparent.
border-current: Sets the border color to the element's current text color.
border-inherit: Inherits the border color from the parent element.
border-black: Sets the border color to black.
border-white: Sets the border color to white.
border-gray-500: Sets the border color to a medium gray.
border-red-500: Sets the border color to red.
border-blue-500: Sets the border color to blue.
border-indigo-500: Sets the border color to indigo.
border-purple-500: Sets the border color to purple.
border-green-500: Sets the border color to green.
border-yellow-500: Sets the border color to yellow.
border-pink-500: Sets the border color to pink.

Note: Tailwind CSS provides color shades such as 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 for its standard color palettes. The available colors and shades depend on the configured theme.

You can also use border-[<value>] to specify a custom border color or border-(<custom-property>) to use a CSS custom property.

Syntax

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

Replace {color} with a supported Tailwind CSS color utility, such as red-500, blue-500, or gray-700.

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Border Color</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-6">

    <div class="mx-auto max-w-3xl rounded-lg bg-white p-6">
        <h1 class="mb-2 text-center text-3xl font-bold text-green-700">
            Tailwind CSS Border Color
        </h1>

        <p class="mb-6 text-center text-gray-600">
            Examples of different border color utilities
        </p>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">

            <p class="border-2 border-transparent bg-gray-100 p-4">
                Transparent Border
            </p>

            <p class="border-2 border-current text-red-600 p-4">
                Current Text Color
            </p>

            <p class="border-2 border-inherit p-4">
                Inherited Border Color
            </p>

            <p class="border-2 border-black p-4">
                Black Border
            </p>

            <p class="border-2 border-white bg-gray-500 p-4">
                White Border
            </p>

            <p class="border-2 border-gray-500 p-4">
                Gray Border
            </p>

            <p class="border-2 border-red-500 p-4">
                Red Border
            </p>

            <p class="border-2 border-blue-500 p-4">
                Blue Border
            </p>

            <p class="border-2 border-indigo-500 p-4">
                Indigo Border
            </p>

            <p class="border-2 border-purple-500 p-4">
                Purple Border
            </p>

            <p class="border-2 border-green-500 p-4">
                Green Border
            </p>

            <p class="border-2 border-yellow-500 p-4">
                Yellow Border
            </p>

            <p class="border-2 border-pink-500 p-4">
                Pink Border
            </p>

            <p class="border-2 border-[#ff6b35] p-4">
                Custom Color Border
            </p>

        </div>
    </div>

</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays a collection of boxes with different border colors, including transparent, current, inherited, standard palette, and custom colors. Each box uses a two-pixel border to make the color differences visible.

Tailwind CSS Border Color

Syntax

Explore