Border opacity

Utilities for controlling the opacity of an element's border color


Class reference

ClassProperties
border-opacity-0--tw-border-opacity: 0;

border-opacity-5--tw-border-opacity: 0.05;

border-opacity-10--tw-border-opacity: 0.1;

border-opacity-15--tw-border-opacity: 0.15;

border-opacity-20--tw-border-opacity: 0.2;

border-opacity-25--tw-border-opacity: 0.25;

border-opacity-30--tw-border-opacity: 0.3;

border-opacity-35--tw-border-opacity: 0.35;

border-opacity-40--tw-border-opacity: 0.4;

border-opacity-45--tw-border-opacity: 0.45;

border-opacity-50--tw-border-opacity: 0.5;

border-opacity-55--tw-border-opacity: 0.55;

border-opacity-60--tw-border-opacity: 0.6;

border-opacity-65--tw-border-opacity: 0.65;

border-opacity-70--tw-border-opacity: 0.7;

border-opacity-75--tw-border-opacity: 0.75;

border-opacity-80--tw-border-opacity: 0.8;

border-opacity-85--tw-border-opacity: 0.85;

border-opacity-90--tw-border-opacity: 0.9;

border-opacity-95--tw-border-opacity: 0.95;

border-opacity-100--tw-border-opacity: 1;

# Usage

Control the opacity of an element’s background color using the .border-opacity-{amount} utilities.

100%
75%
50%
25%
0%
<div class="border-4 border-blue border-opacity-100 ..."></div>
<div class="border-4 border-blue border-opacity-75 ..."></div>
<div class="border-4 border-blue border-opacity-50 ..."></div>
<div class="border-4 border-blue border-opacity-25 ..."></div>
<div class="border-4 border-blue border-opacity-0 ..."></div>

# Responsive

To control an element’s border color opacity at a specific breakpoint, add a {screen}: prefix to any existing border color opacity utility. For example, use md:border-opacity-50 to apply the border-opacity-50 utility at only medium screen sizes and above.

<div class="border-2 border-blue-500 border-opacity-75 md:border-opacity-50">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.