Pricing Learn Community

Overview
CARDS

Border opacity

Tailwind CSS Border opacity

Use responsive border opacity component with TW elements. Quick and easy way to control the opacity of an element's border color.

Basic example

Use .border-opacity-{amount} class to control the opacity of an element’s border color.

{Amount} can be a multiple of 10 or 25, e.g. 0, 10, 20, 25 etc up to 100.

100%

75%

60%

25%

0%

HTML

        
            
        <div class="... border-4 border-opacity-100"></div>
        <div class="... border-4 border-opacity-75"></div>
        <div class="... border-4 border-opacity-60"></div>
        <div class="... border-4 border-opacity-25"></div>
        <div class="... border-4 border-opacity-10"></div>

Basic example
Related resources