Border opacity

Class reference

# Usage

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

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