diff --git a/css/keyrune.css b/css/keyrune.css
index 91f2cc8..5609fc6 100644
--- a/css/keyrune.css
+++ b/css/keyrune.css
@@ -160,111 +160,62 @@
 .ss-common {
   color: #1A1718;
 }
-.ss-common.ss-grad {
+.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
-  -webkit-text-stroke: 0.03em #000;
+  background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
   -webkit-background-clip: text;
+  background-clip: text !important;
   -webkit-text-fill-color: transparent;
 }
-.ss-common.ss-grad.ss-no-border,
-.ss-common.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
+.ss-grad.ss-duo::after {
+  -webkit-text-fill-color: inherit;
 }
 .ss-uncommon {
   color: #707883;
 }
-.ss-uncommon.ss-grad {
+.ss-uncommon.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-  -webkit-text-stroke: 0.03em #111;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-uncommon.ss-grad.ss-no-border,
-.ss-uncommon.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-uncommon.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
 }
 .ss-rare {
   color: #A58E4A;
 }
-.ss-rare.ss-grad {
+.ss-rare.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-rare.ss-grad.ss-no-border,
-.ss-rare.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-rare.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
 }
 .ss-mythic {
   color: #BF4427;
 }
-.ss-mythic.ss-grad {
+.ss-mythic.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-mythic.ss-grad.ss-no-border,
-.ss-mythic.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-mythic.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
 }
 .ss-timeshifted {
   color: #652978;
 }
-.ss-timeshifted.ss-grad {
+.ss-timeshifted.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%);
   /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(135deg, #652978 0%, #c09ac5 50%, #652978 100%);
-  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-timeshifted.ss-grad.ss-no-border,
-.ss-timeshifted.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-timeshifted.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #652978 0%, #c09ac5 50%, #652978 100%);
 }
 .ss-foil {
   color: #a6dced;
 }
-.ss-foil.ss-grad {
+.ss-foil.ss-grad::before {
   background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%);
-  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-foil.ss-grad.ss-no-border,
-.ss-foil.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-foil.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
 }
 /**
  * Fixed width */
@@ -1437,75 +1388,160 @@
 .ss-30a:before {
   content: "\e9aa";
 }
+/**
+ * 
+ * Border layer using ::after as well
+ * 
+ * Symbols cannot have both .duo and .border applied as both 
+ * make use of the same pseudoelement in v3.
+ * 
+ * For duo icons that have an inner white layer as well as a 
+ * border layer, we need to use all 3 available pseudoelements.
+ */
 .ss-border {
-  /*&:not(.ss-duo)::after {
-        content: "";
-        position: absolute;
-        left: -.05em;
-        top: 0em;
-        color: #fff;
-        font-size: 1.15em;
-        z-index: -1;
-        background: #fff;
-        -webkit-text-stroke: 0.05em #fff;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }*/
-  /*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again
-        -webkit-text-stroke: 0.05em #fff;
-        text-stroke: 0.5em #fff;
-    }*/
+  /**
+     * specific border glyphs for these sets, handled via ::after
+     */
 }
-.ss-border.ss-van:after {
-  content: "\e655";
+.ss-border::before {
+  paint-order: stroke fill;
+  -webkit-text-stroke: 0.1em #000;
 }
-.ss-border.ss-hop:after {
-  content: "\e656";
+.ss-border.ss-common::before {
+  -webkit-text-stroke: 0.1em #fff;
 }
-.ss-border.ss-arc:after {
-  content: "\e657";
+.ss-border.ss-40k::before,
+.ss-border.ss-arc::before,
+.ss-border.ss-c13::before,
+.ss-border.ss-c14::before,
+.ss-border.ss-c15::before,
+.ss-border.ss-c16::before,
+.ss-border.ss-cm1::before,
+.ss-border.ss-cmd::before,
+.ss-border.ss-cns::before,
+.ss-border.ss-dft::before,
+.ss-border.ss-dmc::before,
+.ss-border.ss-dsc::before,
+.ss-border.ss-hop::before,
+.ss-border.ss-inr::before,
+.ss-border.ss-pc2::before,
+.ss-border.ss-sis::before,
+.ss-border.ss-van::before {
+  -webkit-text-stroke: 0 !important;
 }
-.ss-border.ss-cmd:after {
-  content: "\e658";
+.ss-border.ss-40k:not(.ss-duo)::after,
+.ss-border.ss-arc:not(.ss-duo)::after,
+.ss-border.ss-c13:not(.ss-duo)::after,
+.ss-border.ss-c14:not(.ss-duo)::after,
+.ss-border.ss-c15:not(.ss-duo)::after,
+.ss-border.ss-c16:not(.ss-duo)::after,
+.ss-border.ss-cm1:not(.ss-duo)::after,
+.ss-border.ss-cmd:not(.ss-duo)::after,
+.ss-border.ss-cns:not(.ss-duo)::after,
+.ss-border.ss-dft:not(.ss-duo)::after,
+.ss-border.ss-dmc:not(.ss-duo)::after,
+.ss-border.ss-dsc:not(.ss-duo)::after,
+.ss-border.ss-hop:not(.ss-duo)::after,
+.ss-border.ss-inr:not(.ss-duo)::after,
+.ss-border.ss-pc2:not(.ss-duo)::after,
+.ss-border.ss-sis:not(.ss-duo)::after,
+.ss-border.ss-van:not(.ss-duo)::after {
+  color: #fff;
+  content: '';
+  display: block;
+  font-size: 1em;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
-.ss-border.ss-pc2:after {
-  content: "\e659";
-}
-.ss-border.ss-cm1:after {
-  content: "\e65a";
-}
-.ss-border.ss-c13:after {
-  content: "\e65b";
-}
-.ss-border.ss-cns:after {
-  content: "\e65c";
-}
-.ss-border.ss-c14:after {
-  content: "\e65d";
-}
-.ss-border.ss-c15:after {
-  content: "\e900";
-}
-.ss-border.ss-inr:after {
-  content: "\e9e3";
-}
-.ss-border.ss-sis::before {
-  content: "\e9b3";
-}
-.ss-border.ss-sis::after {
-  content: "\e9b2";
-}
-.ss-border.ss-c16::before {
-  content: "\e910";
-}
-.ss-border.ss-c16::after {
-  content: "\e9e5";
-}
-.ss-border.ss-dft::before {
-  content: "\e9e1";
-}
-.ss-border.ss-dft::after {
-  content: "\e9e0";
+.ss-border.ss-40k:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-arc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c13:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c14:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c15:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c16:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cns:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dft:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-hop:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-inr:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-sis:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-van:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-40k:not(.ss-duo).ss-rare::after,
+.ss-border.ss-arc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c13:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c14:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c15:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c16:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cns:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dft:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-hop:not(.ss-duo).ss-rare::after,
+.ss-border.ss-inr:not(.ss-duo).ss-rare::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-rare::after,
+.ss-border.ss-sis:not(.ss-duo).ss-rare::after,
+.ss-border.ss-van:not(.ss-duo).ss-rare::after,
+.ss-border.ss-40k:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-arc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c13:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c14:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c15:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c16:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cns:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dft:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-hop:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-inr:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-sis:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-van:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-40k:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-arc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c13:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c14:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c15:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c16:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cns:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dft:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-hop:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-inr:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-sis:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-van:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-40k:not(.ss-duo).ss-foil::after,
+.ss-border.ss-arc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c13:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c14:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c15:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c16:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cns:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dft:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-hop:not(.ss-duo).ss-foil::after,
+.ss-border.ss-inr:not(.ss-duo).ss-foil::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-foil::after,
+.ss-border.ss-sis:not(.ss-duo).ss-foil::after,
+.ss-border.ss-van:not(.ss-duo).ss-foil::after {
+  color: #000;
 }
 .ss-border.ss-40k {
   display: list-item;
@@ -1520,6 +1556,39 @@
   content: "\e99a";
   color: #000;
 }
+.ss-border.ss-arc:after {
+  content: "\e657";
+}
+.ss-border.ss-c13:after {
+  content: "\e65b";
+}
+.ss-border.ss-c14:after {
+  content: "\e65d";
+}
+.ss-border.ss-c15:after {
+  content: "\e900";
+}
+.ss-border.ss-c16::before {
+  content: "\e910";
+}
+.ss-border.ss-c16::after {
+  content: "\e9e5";
+}
+.ss-border.ss-cm1:after {
+  content: "\e65a";
+}
+.ss-border.ss-cmd:after {
+  content: "\e658";
+}
+.ss-border.ss-cns:after {
+  content: "\e65c";
+}
+.ss-border.ss-dft::before {
+  content: "\e9e1";
+}
+.ss-border.ss-dft::after {
+  content: "\e9e0";
+}
 .ss-border.ss-dmc {
   display: list-item;
   list-style-position: inside;
@@ -1549,3 +1618,21 @@
   content: "\e9dd";
   color: #000;
 }
+.ss-border.ss-hop:after {
+  content: "\e656";
+}
+.ss-border.ss-inr:after {
+  content: "\e9e3";
+}
+.ss-border.ss-pc2:after {
+  content: "\e659";
+}
+.ss-border.ss-sis::before {
+  content: "\e9b3";
+}
+.ss-border.ss-sis::after {
+  content: "\e9b2";
+}
+.ss-border.ss-van:after {
+  content: "\e655";
+}
diff --git a/css/keyrune.min.css b/css/keyrune.min.css
index 91f2cc8..5609fc6 100644
--- a/css/keyrune.min.css
+++ b/css/keyrune.min.css
@@ -160,111 +160,62 @@
 .ss-common {
   color: #1A1718;
 }
-.ss-common.ss-grad {
+.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
-  -webkit-text-stroke: 0.03em #000;
+  background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
   -webkit-background-clip: text;
+  background-clip: text !important;
   -webkit-text-fill-color: transparent;
 }
-.ss-common.ss-grad.ss-no-border,
-.ss-common.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
+.ss-grad.ss-duo::after {
+  -webkit-text-fill-color: inherit;
 }
 .ss-uncommon {
   color: #707883;
 }
-.ss-uncommon.ss-grad {
+.ss-uncommon.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-  -webkit-text-stroke: 0.03em #111;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-uncommon.ss-grad.ss-no-border,
-.ss-uncommon.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-uncommon.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
 }
 .ss-rare {
   color: #A58E4A;
 }
-.ss-rare.ss-grad {
+.ss-rare.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-rare.ss-grad.ss-no-border,
-.ss-rare.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-rare.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
 }
 .ss-mythic {
   color: #BF4427;
 }
-.ss-mythic.ss-grad {
+.ss-mythic.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-mythic.ss-grad.ss-no-border,
-.ss-mythic.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-mythic.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
 }
 .ss-timeshifted {
   color: #652978;
 }
-.ss-timeshifted.ss-grad {
+.ss-timeshifted.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%);
   /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(135deg, #652978 0%, #c09ac5 50%, #652978 100%);
-  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-timeshifted.ss-grad.ss-no-border,
-.ss-timeshifted.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-timeshifted.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #652978 0%, #c09ac5 50%, #652978 100%);
 }
 .ss-foil {
   color: #a6dced;
 }
-.ss-foil.ss-grad {
+.ss-foil.ss-grad::before {
   background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%);
-  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-foil.ss-grad.ss-no-border,
-.ss-foil.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-foil.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
 }
 /**
  * Fixed width */
@@ -1437,75 +1388,160 @@
 .ss-30a:before {
   content: "\e9aa";
 }
+/**
+ * 
+ * Border layer using ::after as well
+ * 
+ * Symbols cannot have both .duo and .border applied as both 
+ * make use of the same pseudoelement in v3.
+ * 
+ * For duo icons that have an inner white layer as well as a 
+ * border layer, we need to use all 3 available pseudoelements.
+ */
 .ss-border {
-  /*&:not(.ss-duo)::after {
-        content: "";
-        position: absolute;
-        left: -.05em;
-        top: 0em;
-        color: #fff;
-        font-size: 1.15em;
-        z-index: -1;
-        background: #fff;
-        -webkit-text-stroke: 0.05em #fff;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }*/
-  /*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again
-        -webkit-text-stroke: 0.05em #fff;
-        text-stroke: 0.5em #fff;
-    }*/
+  /**
+     * specific border glyphs for these sets, handled via ::after
+     */
 }
-.ss-border.ss-van:after {
-  content: "\e655";
+.ss-border::before {
+  paint-order: stroke fill;
+  -webkit-text-stroke: 0.1em #000;
 }
-.ss-border.ss-hop:after {
-  content: "\e656";
+.ss-border.ss-common::before {
+  -webkit-text-stroke: 0.1em #fff;
 }
-.ss-border.ss-arc:after {
-  content: "\e657";
+.ss-border.ss-40k::before,
+.ss-border.ss-arc::before,
+.ss-border.ss-c13::before,
+.ss-border.ss-c14::before,
+.ss-border.ss-c15::before,
+.ss-border.ss-c16::before,
+.ss-border.ss-cm1::before,
+.ss-border.ss-cmd::before,
+.ss-border.ss-cns::before,
+.ss-border.ss-dft::before,
+.ss-border.ss-dmc::before,
+.ss-border.ss-dsc::before,
+.ss-border.ss-hop::before,
+.ss-border.ss-inr::before,
+.ss-border.ss-pc2::before,
+.ss-border.ss-sis::before,
+.ss-border.ss-van::before {
+  -webkit-text-stroke: 0 !important;
 }
-.ss-border.ss-cmd:after {
-  content: "\e658";
+.ss-border.ss-40k:not(.ss-duo)::after,
+.ss-border.ss-arc:not(.ss-duo)::after,
+.ss-border.ss-c13:not(.ss-duo)::after,
+.ss-border.ss-c14:not(.ss-duo)::after,
+.ss-border.ss-c15:not(.ss-duo)::after,
+.ss-border.ss-c16:not(.ss-duo)::after,
+.ss-border.ss-cm1:not(.ss-duo)::after,
+.ss-border.ss-cmd:not(.ss-duo)::after,
+.ss-border.ss-cns:not(.ss-duo)::after,
+.ss-border.ss-dft:not(.ss-duo)::after,
+.ss-border.ss-dmc:not(.ss-duo)::after,
+.ss-border.ss-dsc:not(.ss-duo)::after,
+.ss-border.ss-hop:not(.ss-duo)::after,
+.ss-border.ss-inr:not(.ss-duo)::after,
+.ss-border.ss-pc2:not(.ss-duo)::after,
+.ss-border.ss-sis:not(.ss-duo)::after,
+.ss-border.ss-van:not(.ss-duo)::after {
+  color: #fff;
+  content: '';
+  display: block;
+  font-size: 1em;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
-.ss-border.ss-pc2:after {
-  content: "\e659";
-}
-.ss-border.ss-cm1:after {
-  content: "\e65a";
-}
-.ss-border.ss-c13:after {
-  content: "\e65b";
-}
-.ss-border.ss-cns:after {
-  content: "\e65c";
-}
-.ss-border.ss-c14:after {
-  content: "\e65d";
-}
-.ss-border.ss-c15:after {
-  content: "\e900";
-}
-.ss-border.ss-inr:after {
-  content: "\e9e3";
-}
-.ss-border.ss-sis::before {
-  content: "\e9b3";
-}
-.ss-border.ss-sis::after {
-  content: "\e9b2";
-}
-.ss-border.ss-c16::before {
-  content: "\e910";
-}
-.ss-border.ss-c16::after {
-  content: "\e9e5";
-}
-.ss-border.ss-dft::before {
-  content: "\e9e1";
-}
-.ss-border.ss-dft::after {
-  content: "\e9e0";
+.ss-border.ss-40k:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-arc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c13:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c14:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c15:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c16:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cns:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dft:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-hop:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-inr:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-sis:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-van:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-40k:not(.ss-duo).ss-rare::after,
+.ss-border.ss-arc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c13:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c14:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c15:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c16:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cns:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dft:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-hop:not(.ss-duo).ss-rare::after,
+.ss-border.ss-inr:not(.ss-duo).ss-rare::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-rare::after,
+.ss-border.ss-sis:not(.ss-duo).ss-rare::after,
+.ss-border.ss-van:not(.ss-duo).ss-rare::after,
+.ss-border.ss-40k:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-arc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c13:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c14:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c15:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c16:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cns:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dft:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-hop:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-inr:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-sis:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-van:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-40k:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-arc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c13:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c14:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c15:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c16:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cns:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dft:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-hop:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-inr:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-sis:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-van:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-40k:not(.ss-duo).ss-foil::after,
+.ss-border.ss-arc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c13:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c14:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c15:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c16:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cns:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dft:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-hop:not(.ss-duo).ss-foil::after,
+.ss-border.ss-inr:not(.ss-duo).ss-foil::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-foil::after,
+.ss-border.ss-sis:not(.ss-duo).ss-foil::after,
+.ss-border.ss-van:not(.ss-duo).ss-foil::after {
+  color: #000;
 }
 .ss-border.ss-40k {
   display: list-item;
@@ -1520,6 +1556,39 @@
   content: "\e99a";
   color: #000;
 }
+.ss-border.ss-arc:after {
+  content: "\e657";
+}
+.ss-border.ss-c13:after {
+  content: "\e65b";
+}
+.ss-border.ss-c14:after {
+  content: "\e65d";
+}
+.ss-border.ss-c15:after {
+  content: "\e900";
+}
+.ss-border.ss-c16::before {
+  content: "\e910";
+}
+.ss-border.ss-c16::after {
+  content: "\e9e5";
+}
+.ss-border.ss-cm1:after {
+  content: "\e65a";
+}
+.ss-border.ss-cmd:after {
+  content: "\e658";
+}
+.ss-border.ss-cns:after {
+  content: "\e65c";
+}
+.ss-border.ss-dft::before {
+  content: "\e9e1";
+}
+.ss-border.ss-dft::after {
+  content: "\e9e0";
+}
 .ss-border.ss-dmc {
   display: list-item;
   list-style-position: inside;
@@ -1549,3 +1618,21 @@
   content: "\e9dd";
   color: #000;
 }
+.ss-border.ss-hop:after {
+  content: "\e656";
+}
+.ss-border.ss-inr:after {
+  content: "\e9e3";
+}
+.ss-border.ss-pc2:after {
+  content: "\e659";
+}
+.ss-border.ss-sis::before {
+  content: "\e9b3";
+}
+.ss-border.ss-sis::after {
+  content: "\e9b2";
+}
+.ss-border.ss-van:after {
+  content: "\e655";
+}
diff --git a/docs/assets/keyrune.min.css b/docs/assets/keyrune.min.css
index 91f2cc8..5609fc6 100644
--- a/docs/assets/keyrune.min.css
+++ b/docs/assets/keyrune.min.css
@@ -160,111 +160,62 @@
 .ss-common {
   color: #1A1718;
 }
-.ss-common.ss-grad {
+.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
-  -webkit-text-stroke: 0.03em #000;
+  background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
   -webkit-background-clip: text;
+  background-clip: text !important;
   -webkit-text-fill-color: transparent;
 }
-.ss-common.ss-grad.ss-no-border,
-.ss-common.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
+.ss-grad.ss-duo::after {
+  -webkit-text-fill-color: inherit;
 }
 .ss-uncommon {
   color: #707883;
 }
-.ss-uncommon.ss-grad {
+.ss-uncommon.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-  -webkit-text-stroke: 0.03em #111;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-uncommon.ss-grad.ss-no-border,
-.ss-uncommon.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-uncommon.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
 }
 .ss-rare {
   color: #A58E4A;
 }
-.ss-rare.ss-grad {
+.ss-rare.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-rare.ss-grad.ss-no-border,
-.ss-rare.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-rare.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
 }
 .ss-mythic {
   color: #BF4427;
 }
-.ss-mythic.ss-grad {
+.ss-mythic.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-mythic.ss-grad.ss-no-border,
-.ss-mythic.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-mythic.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
 }
 .ss-timeshifted {
   color: #652978;
 }
-.ss-timeshifted.ss-grad {
+.ss-timeshifted.ss-grad::before {
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%);
   /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(135deg, #652978 0%, #c09ac5 50%, #652978 100%);
-  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-timeshifted.ss-grad.ss-no-border,
-.ss-timeshifted.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-timeshifted.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
+  background: linear-gradient(90deg, #652978 0%, #c09ac5 50%, #652978 100%);
 }
 .ss-foil {
   color: #a6dced;
 }
-.ss-foil.ss-grad {
+.ss-foil.ss-grad::before {
   background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%);
-  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  -webkit-text-stroke: 0.03em #333;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.ss-foil.ss-grad.ss-no-border,
-.ss-foil.ss-grad.ss-duo {
-  -webkit-text-stroke: 0;
-}
-.ss-foil.ss-grad.ss-duo::after {
-  -webkit-text-fill-color: inherit;
 }
 /**
  * Fixed width */
@@ -1437,75 +1388,160 @@
 .ss-30a:before {
   content: "\e9aa";
 }
+/**
+ * 
+ * Border layer using ::after as well
+ * 
+ * Symbols cannot have both .duo and .border applied as both 
+ * make use of the same pseudoelement in v3.
+ * 
+ * For duo icons that have an inner white layer as well as a 
+ * border layer, we need to use all 3 available pseudoelements.
+ */
 .ss-border {
-  /*&:not(.ss-duo)::after {
-        content: "";
-        position: absolute;
-        left: -.05em;
-        top: 0em;
-        color: #fff;
-        font-size: 1.15em;
-        z-index: -1;
-        background: #fff;
-        -webkit-text-stroke: 0.05em #fff;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }*/
-  /*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again
-        -webkit-text-stroke: 0.05em #fff;
-        text-stroke: 0.5em #fff;
-    }*/
+  /**
+     * specific border glyphs for these sets, handled via ::after
+     */
 }
-.ss-border.ss-van:after {
-  content: "\e655";
+.ss-border::before {
+  paint-order: stroke fill;
+  -webkit-text-stroke: 0.1em #000;
 }
-.ss-border.ss-hop:after {
-  content: "\e656";
+.ss-border.ss-common::before {
+  -webkit-text-stroke: 0.1em #fff;
 }
-.ss-border.ss-arc:after {
-  content: "\e657";
+.ss-border.ss-40k::before,
+.ss-border.ss-arc::before,
+.ss-border.ss-c13::before,
+.ss-border.ss-c14::before,
+.ss-border.ss-c15::before,
+.ss-border.ss-c16::before,
+.ss-border.ss-cm1::before,
+.ss-border.ss-cmd::before,
+.ss-border.ss-cns::before,
+.ss-border.ss-dft::before,
+.ss-border.ss-dmc::before,
+.ss-border.ss-dsc::before,
+.ss-border.ss-hop::before,
+.ss-border.ss-inr::before,
+.ss-border.ss-pc2::before,
+.ss-border.ss-sis::before,
+.ss-border.ss-van::before {
+  -webkit-text-stroke: 0 !important;
 }
-.ss-border.ss-cmd:after {
-  content: "\e658";
+.ss-border.ss-40k:not(.ss-duo)::after,
+.ss-border.ss-arc:not(.ss-duo)::after,
+.ss-border.ss-c13:not(.ss-duo)::after,
+.ss-border.ss-c14:not(.ss-duo)::after,
+.ss-border.ss-c15:not(.ss-duo)::after,
+.ss-border.ss-c16:not(.ss-duo)::after,
+.ss-border.ss-cm1:not(.ss-duo)::after,
+.ss-border.ss-cmd:not(.ss-duo)::after,
+.ss-border.ss-cns:not(.ss-duo)::after,
+.ss-border.ss-dft:not(.ss-duo)::after,
+.ss-border.ss-dmc:not(.ss-duo)::after,
+.ss-border.ss-dsc:not(.ss-duo)::after,
+.ss-border.ss-hop:not(.ss-duo)::after,
+.ss-border.ss-inr:not(.ss-duo)::after,
+.ss-border.ss-pc2:not(.ss-duo)::after,
+.ss-border.ss-sis:not(.ss-duo)::after,
+.ss-border.ss-van:not(.ss-duo)::after {
+  color: #fff;
+  content: '';
+  display: block;
+  font-size: 1em;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
-.ss-border.ss-pc2:after {
-  content: "\e659";
-}
-.ss-border.ss-cm1:after {
-  content: "\e65a";
-}
-.ss-border.ss-c13:after {
-  content: "\e65b";
-}
-.ss-border.ss-cns:after {
-  content: "\e65c";
-}
-.ss-border.ss-c14:after {
-  content: "\e65d";
-}
-.ss-border.ss-c15:after {
-  content: "\e900";
-}
-.ss-border.ss-inr:after {
-  content: "\e9e3";
-}
-.ss-border.ss-sis::before {
-  content: "\e9b3";
-}
-.ss-border.ss-sis::after {
-  content: "\e9b2";
-}
-.ss-border.ss-c16::before {
-  content: "\e910";
-}
-.ss-border.ss-c16::after {
-  content: "\e9e5";
-}
-.ss-border.ss-dft::before {
-  content: "\e9e1";
-}
-.ss-border.ss-dft::after {
-  content: "\e9e0";
+.ss-border.ss-40k:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-arc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c13:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c14:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c15:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-c16:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-cns:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dft:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-hop:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-inr:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-sis:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-van:not(.ss-duo).ss-uncommon::after,
+.ss-border.ss-40k:not(.ss-duo).ss-rare::after,
+.ss-border.ss-arc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c13:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c14:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c15:not(.ss-duo).ss-rare::after,
+.ss-border.ss-c16:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-rare::after,
+.ss-border.ss-cns:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dft:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-rare::after,
+.ss-border.ss-hop:not(.ss-duo).ss-rare::after,
+.ss-border.ss-inr:not(.ss-duo).ss-rare::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-rare::after,
+.ss-border.ss-sis:not(.ss-duo).ss-rare::after,
+.ss-border.ss-van:not(.ss-duo).ss-rare::after,
+.ss-border.ss-40k:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-arc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c13:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c14:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c15:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-c16:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-cns:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dft:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-hop:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-inr:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-sis:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-van:not(.ss-duo).ss-mythic::after,
+.ss-border.ss-40k:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-arc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c13:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c14:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c15:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-c16:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-cns:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dft:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-hop:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-inr:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-sis:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-van:not(.ss-duo).ss-timeshifted::after,
+.ss-border.ss-40k:not(.ss-duo).ss-foil::after,
+.ss-border.ss-arc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c13:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c14:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c15:not(.ss-duo).ss-foil::after,
+.ss-border.ss-c16:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cm1:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cmd:not(.ss-duo).ss-foil::after,
+.ss-border.ss-cns:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dft:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dmc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-dsc:not(.ss-duo).ss-foil::after,
+.ss-border.ss-hop:not(.ss-duo).ss-foil::after,
+.ss-border.ss-inr:not(.ss-duo).ss-foil::after,
+.ss-border.ss-pc2:not(.ss-duo).ss-foil::after,
+.ss-border.ss-sis:not(.ss-duo).ss-foil::after,
+.ss-border.ss-van:not(.ss-duo).ss-foil::after {
+  color: #000;
 }
 .ss-border.ss-40k {
   display: list-item;
@@ -1520,6 +1556,39 @@
   content: "\e99a";
   color: #000;
 }
+.ss-border.ss-arc:after {
+  content: "\e657";
+}
+.ss-border.ss-c13:after {
+  content: "\e65b";
+}
+.ss-border.ss-c14:after {
+  content: "\e65d";
+}
+.ss-border.ss-c15:after {
+  content: "\e900";
+}
+.ss-border.ss-c16::before {
+  content: "\e910";
+}
+.ss-border.ss-c16::after {
+  content: "\e9e5";
+}
+.ss-border.ss-cm1:after {
+  content: "\e65a";
+}
+.ss-border.ss-cmd:after {
+  content: "\e658";
+}
+.ss-border.ss-cns:after {
+  content: "\e65c";
+}
+.ss-border.ss-dft::before {
+  content: "\e9e1";
+}
+.ss-border.ss-dft::after {
+  content: "\e9e0";
+}
 .ss-border.ss-dmc {
   display: list-item;
   list-style-position: inside;
@@ -1549,3 +1618,21 @@
   content: "\e9dd";
   color: #000;
 }
+.ss-border.ss-hop:after {
+  content: "\e656";
+}
+.ss-border.ss-inr:after {
+  content: "\e9e3";
+}
+.ss-border.ss-pc2:after {
+  content: "\e659";
+}
+.ss-border.ss-sis::before {
+  content: "\e9b3";
+}
+.ss-border.ss-sis::after {
+  content: "\e9b2";
+}
+.ss-border.ss-van:after {
+  content: "\e655";
+}
diff --git a/docs/icons.html b/docs/icons.html
index 97c71fa..1639163 100644
--- a/docs/icons.html
+++ b/docs/icons.html
@@ -499,7 +499,7 @@
                     <div class="icon" id="cn2" name="Conspiracy 2: Take the Crown" data-name="Conspiracy 2: Take the Crown" data-class="cn2" data-unicode="e904" data-added="v1.5.2">
                         <span class="name"><i class="ss ss-cn2"></i> Conspiracy 2: Take the Crown <em>(cn2)</em></span>
                     </div>
-                    <div class="icon" id="c16" name="Commander 2016" data-name="Commander 2016" data-class="c16" data-unicode="e910" data-added="v1.7.0" data-duo="true">
+                    <div class="icon" id="c16" name="Commander 2016" data-name="Commander 2016" data-class="c16" data-unicode="e910" data-added="v1.7.0" data-duo="false">
                         <span class="name"><i class="ss ss-c16"></i> Commander 2016 <em>(c16)</em></span>
                     </div>
                     <div class="icon" id="pca" name="Planechase Anthology" data-name="Planechase Anthology" data-class="pca" data-unicode="e911" data-added="v1.7.0">
diff --git a/less/border.less b/less/border.less
index c89d686..95a7fc7 100644
--- a/less/border.less
+++ b/less/border.less
@@ -1,65 +1,75 @@
+/**
+ * 
+ * Border layer using ::after as well
+ * 
+ * Symbols cannot have both .duo and .border applied as both 
+ * make use of the same pseudoelement in v3.
+ * 
+ * For duo icons that have an inner white layer as well as a 
+ * border layer, we need to use all 3 available pseudoelements.
+ */
+
 .@{ss-prefix}-border {
-    /*&:not(.ss-duo)::after {
-        content: "";
-        position: absolute;
-        left: -.05em;
-        top: 0em;
-        color: #fff;
-        font-size: 1.15em;
-        z-index: -1;
-        background: #fff;
-        -webkit-text-stroke: 0.05em #fff;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }*/
-    /*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again
-        -webkit-text-stroke: 0.05em #fff;
-        text-stroke: 0.5em #fff;
-    }*/
-
-    &.@{ss-prefix}-van:after { content: "\e655"; } // Vanguard
-    &.@{ss-prefix}-hop:after { content: "\e656"; } // Planechase 2009
-    &.@{ss-prefix}-arc:after { content: "\e657"; } // Archenemy
-    &.@{ss-prefix}-cmd:after { content: "\e658"; } // Commander
-    &.@{ss-prefix}-pc2:after { content: "\e659"; } // Planechase 2012
-    &.@{ss-prefix}-cm1:after { content: "\e65a"; } // Commander's Arsenal
-    &.@{ss-prefix}-c13:after { content: "\e65b"; } // Commander 2013
-    &.@{ss-prefix}-cns:after { content: "\e65c"; } // Conspiracy
-    &.@{ss-prefix}-c14:after { content: "\e65d"; } // Commander 2014
-    &.@{ss-prefix}-c15:after { content: "\e900"; } // Commander 2015
-    &.@{ss-prefix}-inr:after { content: "\e9e3"; } // Innistrad Remastered
-
-    // corrections for various duo icons
-    // SIS: the regular symbol becomes the border now
-    &.@{ss-prefix}-sis {
-        &::before {
-            content: "\e9b3";
-        }
-        &::after {
-            content: "\e9b2";
-        }
+    &::before {
+        paint-order: stroke fill;
+        -webkit-text-stroke: 0.1em #000;
     }
-    // c16: regular symbol becomes the border
-    &.@{ss-prefix}-c16 {
-        &::before {
-            content: "\e910"; // rarity
-        }
-        &::after {
-            content: "\e9e5"; // new border
-        }
+
+    &.@{ss-prefix}-common::before {
+        -webkit-text-stroke: 0.1em #fff;
     }
-    // dft: regular symbol becomes the border
-    &.@{ss-prefix}-dft {
+
+    /**
+     * specific border glyphs for these sets, handled via ::after
+     */
+    &.@{ss-prefix}-40k,
+    &.@{ss-prefix}-arc,
+    &.@{ss-prefix}-c13,
+    &.@{ss-prefix}-c14,
+    &.@{ss-prefix}-c15,
+    &.@{ss-prefix}-c16,
+    &.@{ss-prefix}-cm1,
+    &.@{ss-prefix}-cmd,
+    &.@{ss-prefix}-cns,
+    &.@{ss-prefix}-dft,
+    &.@{ss-prefix}-dmc,
+    &.@{ss-prefix}-dsc,
+    &.@{ss-prefix}-hop,
+    &.@{ss-prefix}-inr,
+    &.@{ss-prefix}-pc2,
+    &.@{ss-prefix}-sis,
+    &.@{ss-prefix}-van {
         &::before {
-            content: "\e9e1"; // rarity
+            -webkit-text-stroke: 0 !important;
         }
-        &::after {
-            content: "\e9e0"; // new border
+
+        &:not(.ss-duo) {
+            &::after {
+                color: #fff;
+                content: '';
+                display: block;
+                font-size: 1em;
+                height: 100%;
+                left: 0;
+                position: absolute;
+                top: 0;
+                width: 100%;
+            }
+
+            // all non-common rarities get a black border
+            &.@{ss-prefix}-uncommon::after,
+            &.@{ss-prefix}-rare::after,
+            &.@{ss-prefix}-mythic::after,
+            &.@{ss-prefix}-timeshifted::after,
+            &.@{ss-prefix}-foil::after {
+                color: #000;
+            }
         }
     }
 
-    // experimental ::marker for 3 layer icons
-    &.@{ss-prefix}-40k {
+    // glyphs per set
+    //
+    &.@{ss-prefix}-40k { // experimental ::marker for 3 layer icons
         display: list-item;
         list-style-position: inside;
 
@@ -73,7 +83,30 @@
             color: #000;
         }
     }
-    &.@{ss-prefix}-dmc {
+    &.@{ss-prefix}-arc:after { content: "\e657"; } // Archenemy
+    &.@{ss-prefix}-c13:after { content: "\e65b"; } // Commander 2013
+    &.@{ss-prefix}-c14:after { content: "\e65d"; } // Commander 2014
+    &.@{ss-prefix}-c15:after { content: "\e900"; } // Commander 2015
+    &.@{ss-prefix}-c16 { // c16: regular symbol becomes the border
+        &::before {
+            content: "\e910"; // rarity
+        }
+        &::after {
+            content: "\e9e5"; // new border
+        }
+    }
+    &.@{ss-prefix}-cm1:after { content: "\e65a"; } // Commander's Arsenal
+    &.@{ss-prefix}-cmd:after { content: "\e658"; } // Commander
+    &.@{ss-prefix}-cns:after { content: "\e65c"; } // Conspiracy
+    &.@{ss-prefix}-dft { // dft: regular symbol becomes the border
+        &::before {
+            content: "\e9e1"; // rarity
+        }
+        &::after {
+            content: "\e9e0"; // new border
+        }
+    }
+    &.@{ss-prefix}-dmc { 
         display: list-item;
         list-style-position: inside;
 
@@ -87,7 +120,7 @@
             color: #000;
         }
     }
-    &.@{ss-prefix}-dsc {
+    &.@{ss-prefix}-dsc { // experimental ::marker for 3 layer icons
         display: list-item;
         list-style-position: inside;
 
@@ -105,4 +138,16 @@
             color: #000;
         }
     }
+    &.@{ss-prefix}-hop:after { content: "\e656"; } // Planechase 2009
+    &.@{ss-prefix}-inr:after { content: "\e9e3"; } // Innistrad Remastered
+    &.@{ss-prefix}-pc2:after { content: "\e659"; } // Planechase 2012
+    &.@{ss-prefix}-sis { // SIS: the regular symbol becomes the border now
+        &::before {
+            content: "\e9b3";
+        }
+        &::after {
+            content: "\e9b2";
+        }
+    }
+    &.@{ss-prefix}-van:after { content: "\e655"; } // Vanguard
 }
\ No newline at end of file
diff --git a/less/rarities.less b/less/rarities.less
index 0c9562e..9217b40 100644
--- a/less/rarities.less
+++ b/less/rarities.less
@@ -1,114 +1,66 @@
 /**
  * Rarity colors */
 
+
+
 .@{ss-prefix}-common {
     color: #1A1718;
-    &.@{ss-prefix}-grad {
-        // webkit outline/gradient
+}
+
+.@{ss-prefix}-grad {
+    &::before {
         background: -webkit-gradient(linear, left top, right top, color-stop(1%,#302b2c), color-stop(50%,#474040), color-stop(100%,#302b2c)); /* Chrome,Safari4+ */
-        background: -webkit-linear-gradient(left, #302b2c 1%,#474040 50%,#302b2c 100%); // Chrome10+,Safari5.1+
-        -webkit-text-stroke: 0.03em #000;
+        background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%); // Chrome10+,Safari5.1+
+        background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
         -webkit-background-clip: text;
+        background-clip: text !important;
         -webkit-text-fill-color: transparent;
-        &.@{ss-prefix}-no-border,
-        &.@{ss-prefix}-duo {
-            -webkit-text-stroke: 0;
-        }
+    }
+    &.@{ss-prefix}-duo::after {
+        -webkit-text-fill-color: inherit;
     }
 }
 
 .@{ss-prefix}-uncommon {
     color: #707883;
-    &.@{ss-prefix}-grad {
-        // webkit outline/gradient
+    &.@{ss-prefix}-grad::before {
         background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5a6572), color-stop(50%,#9e9e9e), color-stop(100%,#5a6572)); /* Chrome,Safari4+ */
-        background: -webkit-linear-gradient(left, #5a6572 0%,#9e9e9e 50%,#5a6572 100%); // Chrome10+,Safari5.1+
-        -webkit-text-stroke: 0.03em #111;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        &.@{ss-prefix}-no-border,
-        &.@{ss-prefix}-duo {
-            -webkit-text-stroke: 0;
-        }
-        &.@{ss-prefix}-duo::after {
-            -webkit-text-fill-color: inherit;
-        }
+        background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%); // Chrome10+,Safari5.1+
+        background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
     }
 }
 
 .@{ss-prefix}-rare {
     color: #A58E4A;
-    &.@{ss-prefix}-grad {
-        // webkit outline/gradient
+    &.@{ss-prefix}-grad::before {
         background: -webkit-gradient(linear, left top, right top, color-stop(0%,#876a3b), color-stop(50%,#dfbd6b), color-stop(100%,#876a3b)); /* Chrome,Safari4+ */
-        background: -webkit-linear-gradient(left, #876a3b 0%,#dfbd6b 50%,#876a3b 100%); // Chrome10+,Safari5.1+
-        -webkit-text-stroke: 0.03em #333;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        &.@{ss-prefix}-no-border,
-        &.@{ss-prefix}-duo {
-            -webkit-text-stroke: 0;
-        }
-        &.@{ss-prefix}-duo::after {
-            -webkit-text-fill-color: inherit;
-        }
+        background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%); // Chrome10+,Safari5.1+
+        background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
     }
 }
 
 .@{ss-prefix}-mythic {
     color: #BF4427;
-    &.@{ss-prefix}-grad {
-        // webkit outline/gradient
+    &.@{ss-prefix}-grad::before {
         background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b21f0f), color-stop(50%,#f38300), color-stop(100%,#b21f0f)); /* Chrome,Safari4+ */
-        background: -webkit-linear-gradient(left, #b21f0f 0%,#f38300 50%,#b21f0f 100%); // Chrome10+, Safari5.1+
-        -webkit-text-stroke: 0.03em #333;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        &.@{ss-prefix}-no-border,
-        &.@{ss-prefix}-duo {
-            -webkit-text-stroke: 0;
-        }
-        &.@{ss-prefix}-duo::after {
-            -webkit-text-fill-color: inherit;
-        }
+        background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%); // Chrome10+, Safari5.1+
+        background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
     }
 }
 
 .@{ss-prefix}-timeshifted {
     color: #652978;
-    &.@{ss-prefix}-grad {
-        // webkit outline/gradient
+    &.@{ss-prefix}-grad::before {
         background: -webkit-gradient(linear, left top, right top, color-stop(0%,#652978), color-stop(50%,#c09ac5), color-stop(100%,#652978)); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(-45deg, #652978 0%,#c09ac5 50%,#652978 100%); /* Chrome10-25,Safari5.1-6 */
-        background: linear-gradient(135deg, #652978 0%,#c09ac5 50%,#652978 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-        -webkit-text-stroke: 0.03em #333;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        &.@{ss-prefix}-no-border,
-        &.@{ss-prefix}-duo {
-            -webkit-text-stroke: 0;
-        }
-        &.@{ss-prefix}-duo::after {
-            -webkit-text-fill-color: inherit;
-        }
+        background: linear-gradient(90deg, #652978 0%,#c09ac5 50%,#652978 100%);
     }
 }
 
 .@{ss-prefix}-foil {
     color: #a6dced;
-    &.@{ss-prefix}-grad {
-        // webkit outline/gradient
+    &.@{ss-prefix}-grad::before {
         background: -webkit-linear-gradient(-45deg, #ea8d66 0%,#ea8d66 10%,#fdef8a 17%,#8bcc93 33%,#a6dced 50%,#6f75aa 67%,#e599c2 83%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
-        background: linear-gradient(135deg, #ea8d66 0%,#ea8d66 15%,#fdef8a 28%,#8bcc93 42%,#a6dced 55%,#6f75aa 68%,#e599c2 84%,#e599c2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-        -webkit-text-stroke: 0.03em #333;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        &.@{ss-prefix}-no-border,
-        &.@{ss-prefix}-duo {
-            -webkit-text-stroke: 0;
-        }
-        &.@{ss-prefix}-duo::after {
-            -webkit-text-fill-color: inherit;
-        }
+        background: linear-gradient(135deg, #ea8d66 0%,#ea8d66 15%,#fdef8a 28%,#8bcc93 42%,#a6dced 55%,#6f75aa 68%,#e599c2 84%,#e599c2 100%);
     }
 }
\ No newline at end of file