Semi-transparent borders using background-clip: padding-box;

Default value is border-box, so padding-box tells browser to clip the background at the padding edge rather than the border box edge


.transparent-border {
  padding: 10px;
  border: 10px solid hsla(0, 0%, 100%, .5);
  background: #8E8DBE;
  /* default value is border-box */
  background-clip: padding-box;
}

Using layered box-shadows to emulate multiple borders via the spread radius parameter with zero offsets and zero blur

First one is topmost, therefore should be smallest spread radius.

But shadows don't affect layout and are oblivious to box-sizing (would need to compensate with padding/margin)

Also don't react to mouse-events, so would need to use 'inset' keyword so shadows drawn inside the element, and add extra padding to compensate


.multiple-borders {
  margin: 10px;
  padding: 10px;
  background: #A9E4EF;
  box-shadow: 0 0 0 10px #7A306C ,
              0 0 0 15px #8E8DBE,
              0 2px 5px 15px rgba(0, 0, 0, .6);
}

If only 2 borders needed, 'outline' property with 'border' allows for border style too.

'outline-offset' also controls distance of outline from element boundaries, including negative values.

But doesn't work well with border-radius


.multiple-borders-2 {
  margin: 10px;
  padding: 10px;
  background: #A9E4EF;
  border: 10px solid #7A306C ;
  outline: 15px solid #8E8DBE;
}

Stitching effect using negative outline-offset and a dashed outline.


.stitched-border {
  margin: 10px;
  padding: 20px;
  background: white;
  border: 5px solid #7A306C ;
  outline: 5px dashed black;
  outline-offset: -20px;
}