Border Opacity

Utilities for controlling the opacity of an element’s border color.

Contents

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 examples

Changing the opacity

Use the border-opacity-75, border-opacity-50, or border-opacity-25 to change the opacity of an element’s border color.

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

Customize the opacity

To change that opacity, override --bs-border-opacity via custom styles or inline styles.

  <div class="border border-4 border-secondary ..." style="--bs-border-opacity: 1"></div>
  <div class="border border-4 border-secondary ..." style="--bs-border-opacity: 0.65"></div>
  <div class="border border-4 border-secondary ..." style="--bs-border-opacity: 0.45"></div>