V5 Utilities : Add Border Opacity

Created by: devhoussam

Why Border Opacity?

The Border Opacity Utilities for controlling the opacity of an element's border color.

Border Color Changes :

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(13, 110, 253, var(--bs-border-opacity))
}

.border-indigo {
  --bs-border-opacity: 1;
  border-color: rgba(102, 16, 242, var(--bs-border-opacity))
}

.border-purple {
  --bs-border-opacity: 1;
  border-color: rgba(111, 66, 193, var(--bs-border-opacity))
}
...

Border Opacity Example :

.border-opacity-0 {
  --bs-border-opacity: 0
}

.border-opacity-5 {
  --bs-border-opacity: 0.05
}

.border-opacity-10 {
  --bs-border-opacity: 0.1
}

.border-opacity-20 {
  --bs-border-opacity: 0.2
}

.border-opacity-25 {
  --bs-border-opacity: 0.25
}
...

The same thing is supported by Tailwind CSS V2.03

https://tailwindcss.com/docs/border-color https://tailwindcss.com/docs/border-opacity