Adding Borders To A CSS Triangle

To add a border to a triangle that was created through borders or a clip-path property, you simply have overlay a slightly smaller triangle that gives the illusion 🧙‍♀️ of a border.

Take this black triangle below as an example.

.triangle {
  width: 0;
  height: 0;
  
  border-bottom: solid 50px transparent;
  border-top: solid 50px black;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

The simplest way to overlay another triangle is by absolute positioning it as a pseudo-element. First, set the parent triangle to a relative position.

.triangle {
  width: 0;
  height: 0;
+ position: relative;
  ...
}

Next, shave off some pixels from the overlaying triangle and try to position it inside the parent. There's no magic formula, just some good ol' 🧓 trial and error.

.triangle:before {
  content: "";
  width: 0;
  height: 0;
  
  position: absolute;
  border-bottom: solid 48px transparent;
  border-top: solid 48px white;
  border-left: solid 48px transparent;
  border-right: solid 48px transparent;
  top: -49px;
  left: -48px;
}