Element with gradient border and "transparent" background

Question

I'm using Sass and React to build an app. Since gradient borders are not a thing in CSS, I made this mixin with color and width (later used as a border-width).

Basically what I'm trying to do is to create a pseudo ::before element just placing itself down with the main element having a transparent border, so we can see below it.

I doesn't seem to work as the main element is always on top of the gradient colored one.

My Code:

@mixin makeGradBorder($bg-color, $width) {
  border: solid $width transparent;
  background: $bg-color;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background:$gradient-primary;
  }
}

Could it be a z-index problem?