Use the border opacity utilities to change the opacity of an element’s border color.

Quick reference

Class	Properties
`.border-opacity-10`	border-opacity: 0.1;
`.border-opacity-25`	border-opacity: 0.25;
`.border-opacity-50`	border-opacity: 0.5;
`.border-opacity-75`	border-opacity: 0.75;
`.border-opacity-100`	border-opacity: 1;

Basic usage

Changing the opacity

border-opacity-100

border-opacity-75

border-opacity-50

border-opacity-25

<div class="border-opacity-100 border border-secondary..."></div>
<div class="border-opacity-75 border border-secondary..."></div>
<div class="border-opacity-50 border border-secondary..."></div>
<div class="border-opacity-25 border border-secondary..."></div>

Edit this page on Github

Last updated on April 6, 2024

Border Opacity

Quick reference

Basic usage

Changing the opacity