holic/border-colors

Use this suite of border color utilities to directly style elements. The color values used in this module are from mrmrs/colors.

Border Colors

<div class="flex flex-wrap mxn1">
  <div class="flex-auto center m1 p1 border border-black">.border-black</div>
  <div class="flex-auto center m1 p1 border border-gray">.border-gray</div>
  <div class="flex-auto center m1 p1 border border-silver">.border-silver</div>
  <div class="flex-auto center m1 p1 border border-white">.border-white</div>
  <div class="flex-auto center m1 p1 border border-aqua">.border-aqua</div>
  <div class="flex-auto center m1 p1 border border-blue">.border-blue</div>
  <div class="flex-auto center m1 p1 border border-navy">.border-navy</div>
  <div class="flex-auto center m1 p1 border border-teal">.border-teal</div>
  <div class="flex-auto center m1 p1 border border-green">.border-green</div>
  <div class="flex-auto center m1 p1 border border-olive">.border-olive</div>
  <div class="flex-auto center m1 p1 border border-lime">.border-lime</div>
  <div class="flex-auto center m1 p1 border border-yellow">.border-yellow</div>
  <div class="flex-auto center m1 p1 border border-orange">.border-orange</div>
  <div class="flex-auto center m1 p1 border border-red">.border-red</div>
  <div class="flex-auto center m1 p1 border border-fuchsia">.border-fuchsia</div>
  <div class="flex-auto center m1 p1 border border-purple">.border-purple</div>
  <div class="flex-auto center m1 p1 border border-maroon">.border-maroon</div>
  <div class="flex-auto center m1 p1 border border-darken-1">.border-darken-1</div>
  <div class="flex-auto center m1 p1 border border-darken-2">.border-darken-2</div>
  <div class="flex-auto center m1 p1 border border-darken-3">.border-darken-3</div>
  <div class="flex-auto center m1 p1 border border-darken-4">.border-darken-4</div>
</div>
<div class="p1 flex flex-wrap mxn1 white bg-black">
  <div class="flex-auto center m1 p1 border border-lighten-1">.border-lighten-1</div>
  <div class="flex-auto center m1 p1 border border-lighten-2">.border-lighten-2</div>
  <div class="flex-auto center m1 p1 border border-lighten-3">.border-lighten-3</div>
  <div class="flex-auto center m1 p1 border border-lighten-4">.border-lighten-4</div>
</div>