css - How to position :before pseudo element under parent that has z-index + position relative set? -

i trying create two-colored border pseudo-element. if add z-index parent ".d" stops working. there way have "position: relative" , "z-index" on ".d" , make work?

.d {    background-color: #000;    height: 100px;    width: 100px;    /*z-index: 1000;  */    /* stops working if add z-index */    position: relative;  }  .d:before {    content: "";    border: #0000ff 4px dashed;    background-color: #ff0000;    top: -2px;    left: -2px;    bottom: -2px;    right: -2px;    position: absolute;    z-index: -1;  }

<div class="d"></div>

https://jsfiddle.net/vmwm0zfg/

you can use 2 pseudo elements 1 solid border , 1 dashed. solid border sits underneath dashed border eliminating need negative z-index.

overflow: hidden can used on parent cut borders width whilst maintaining stroke length.

.d {    background-color: #000;    height: 100px;    width: 100px;    position: relative;    z-index: 100;    /*hidden cut off excess border*/    overflow: hidden;  }  .d:before,  .d:after {    content: "";    top: -2px;    left: -2px;    bottom: -2px;    right: -2px;    position: absolute;  }  .d:before {    border: #f00 4px solid;  }  .d:after {    border: #00a3ff 4px dashed;  }

<div class="d"></div>