Border opacity colors

<!-- Source -->
<div class="border-primary-10"></div>
<div class="border-primary-20"></div>
<div class="border-primary-30"></div>
<div class="border-primary-40"></div>
<div class="border-primary-50"></div>
<div class="border-primary-60"></div>
<div class="border-primary-70"></div>
<div class="border-primary-80"></div>
<div class="border-primary-90"></div>

<div class="border-secondary-10"></div>
<div class="border-secondary-20"></div>
<div class="border-secondary-30"></div>
<div class="border-secondary-40"></div>
<div class="border-secondary-50"></div>
<div class="border-secondary-60"></div>
<div class="border-secondary-70"></div>
<div class="border-secondary-80"></div>
<div class="border-secondary-90"></div>

<div class="border-success-10"></div>
<div class="border-success-20"></div>
<div class="border-success-30"></div>
<div class="border-success-40"></div>
<div class="border-success-50"></div>
<div class="border-success-60"></div>
<div class="border-success-70"></div>
<div class="border-success-80"></div>
<div class="border-success-90"></div>

<div class="border-info-10"></div>
<div class="border-info-20"></div>
<div class="border-info-30"></div>
<div class="border-info-40"></div>
<div class="border-info-50"></div>
<div class="border-info-60"></div>
<div class="border-info-70"></div>
<div class="border-info-80"></div>
<div class="border-info-90"></div>

<div class="border-warning-10"></div>
<div class="border-warning-20"></div>
<div class="border-warning-30"></div>
<div class="border-warning-40"></div>
<div class="border-warning-50"></div>
<div class="border-warning-60"></div>
<div class="border-warning-70"></div>
<div class="border-warning-80"></div>
<div class="border-warning-90"></div>

<div class="border-danger-10"></div>
<div class="border-danger-20"></div>
<div class="border-danger-30"></div>
<div class="border-danger-40"></div>
<div class="border-danger-50"></div>
<div class="border-danger-60"></div>
<div class="border-danger-70"></div>
<div class="border-danger-80"></div>
<div class="border-danger-90"></div>

<div class="border-light-10"></div>
<div class="border-light-20"></div>
<div class="border-light-30"></div>
<div class="border-light-40"></div>
<div class="border-light-50"></div>
<div class="border-light-60"></div>
<div class="border-light-70"></div>
<div class="border-light-80"></div>
<div class="border-light-90"></div>

<div class="border-dark-10"></div>
<div class="border-dark-20"></div>
<div class="border-dark-30"></div>
<div class="border-dark-40"></div>
<div class="border-dark-50"></div>
<div class="border-dark-60"></div>
<div class="border-dark-70"></div>
<div class="border-dark-80"></div>
<div class="border-dark-90"></div>

<div class="border-black-10"></div>
<div class="border-black-20"></div>
<div class="border-black-30"></div>
<div class="border-black-40"></div>
<div class="border-black-50"></div>
<div class="border-black-60"></div>
<div class="border-black-70"></div>
<div class="border-black-80"></div>
<div class="border-black-90"></div>

<div class="border-indigo-10"></div>
<div class="border-indigo-20"></div>
<div class="border-indigo-30"></div>
<div class="border-indigo-40"></div>
<div class="border-indigo-50"></div>
<div class="border-indigo-60"></div>
<div class="border-indigo-70"></div>
<div class="border-indigo-80"></div>
<div class="border-indigo-90"></div>

<div class="border-orange-10"></div>
<div class="border-orange-20"></div>
<div class="border-orange-30"></div>
<div class="border-orange-40"></div>
<div class="border-orange-50"></div>
<div class="border-orange-60"></div>
<div class="border-orange-70"></div>
<div class="border-orange-80"></div>
<div class="border-orange-90"></div>

<div class="border-pink-10"></div>
<div class="border-pink-20"></div>
<div class="border-pink-30"></div>
<div class="border-pink-40"></div>
<div class="border-pink-50"></div>
<div class="border-pink-60"></div>
<div class="border-pink-70"></div>
<div class="border-pink-80"></div>
<div class="border-pink-90"></div>

<div class="border-purple-10"></div>
<div class="border-purple-20"></div>
<div class="border-purple-30"></div>
<div class="border-purple-40"></div>
<div class="border-purple-50"></div>
<div class="border-purple-60"></div>
<div class="border-purple-70"></div>
<div class="border-purple-80"></div>
<div class="border-purple-90"></div>

<div class="border-teal-10"></div>
<div class="border-teal-20"></div>
<div class="border-teal-30"></div>
<div class="border-teal-40"></div>
<div class="border-teal-50"></div>
<div class="border-teal-60"></div>
<div class="border-teal-70"></div>
<div class="border-teal-80"></div>
<div class="border-teal-90"></div>

<div class="border-white-10"></div>
<div class="border-white-20"></div>
<div class="border-white-30"></div>
<div class="border-white-40"></div>
<div class="border-white-50"></div>
<div class="border-white-60"></div>
<div class="border-white-70"></div>
<div class="border-white-80"></div>
<div class="border-white-90"></div>