Tailwind CSS Border Opacity

Tailwind CSS provides color opacity modifiers to control the transparency of an element's border color. In Tailwind CSS v4, you can use these modifiers directly with border color utilities instead of using the older border-opacity-* classes.

Tailwind CSS v4 supports opacity modifiers directly in border color utility classes. The following examples demonstrate commonly used opacity values.

• border-green-800/0: Makes the border color fully transparent.
• border-green-800/5: Sets the border color to 5% opacity.
• border-green-800/10: Sets the border color to 10% opacity.
• border-green-800/20: Sets the border color to 20% opacity.
• border-green-800/25: Sets the border color to 25% opacity.
• border-green-800/30: Sets the border color to 30% opacity.
• border-green-800/40: Sets the border color to 40% opacity.
• border-green-800/50: Sets the border color to 50% opacity.
• border-green-800/60: Sets the border color to 60% opacity.
• border-green-800/70: Sets the border color to 70% opacity.
• border-green-800/75: Sets the border color to 75% opacity.
• border-green-800/80: Sets the border color to 80% opacity.
• border-green-800/90: Sets the border color to 90% opacity.
• border-green-800/95: Sets the border color to 95% opacity.
• border-green-800/100: Sets the border color to 100% opacity.

These examples use the green color palette. You can replace green-800 with another supported border color.

Syntax

<element class="border-2 border-green-800/50">...</element>

Example:

<!--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 Opacity</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 p-6">
    <div class="mx-auto max-w-2xl">
        <h1 class="mb-4 text-center text-3xl font-bold text-green-700">
            Tailwind CSS Border Opacity
        </h1>

        <div class="space-y-4 rounded-lg bg-white p-6">
            <div class="border-4 border-green-800/100 p-3">
                100% Border Opacity
            </div>

            <div class="border-4 border-green-800/75 p-3">
                75% Border Opacity
            </div>

            <div class="border-4 border-green-800/50 p-3">
                50% Border Opacity
            </div>

            <div class="border-4 border-green-800/25 p-3">
                25% Border Opacity
            </div>

            <div class="border-4 border-green-800/10 p-3">
                10% Border Opacity
            </div>

            <div class="border-4 border-green-800/0 p-3">
                0% Border Opacity
            </div>
        </div>
    </div>
</body>

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

Output: The page displays six boxes with different border color opacity values. The border color is fully visible at 100% opacity and becomes progressively more transparent as the opacity decreases. At 0% opacity, the border color is fully transparent, although the border width is still defined.