CSS Border Gradient with Border radius

HTML

<div class="hey">
    <h1>Sorry, only works in Chrome:(!</h1>
</div>

CSS

.hey {
      display: block;
      position: absolute;
      left: 50px;
      top: 50px;
      margin-top: 18pt;
      padding-left: 50pt;
      padding-right: 50pt;
      padding-top: 25pt;
      padding-bottom: 25pt;
      border-radius: 6px;
      font-size: 18pt;
      background-color: transparent;
      border-width: 3pt;
      border-image: linear-gradient(#D9421C, #E8A22F) 14% stretch;
    }
    .hey::after {
      content: '';
      border-radius: 8px;
      border: 3pt solid #fff;
      width: calc(100% + 6pt);
      height: calc(100% + 6pt);
      position: absolute;
      top: -6pt;
      left: -6pt;
      z-index: 900;
    }
    .hey::before {
      content: '';
      border-radius: 2px;
      border: 1.5pt solid #fff;
      width: calc(100%);
      height: calc(100% + 0.25pt);
      position: absolute;
      top: -1.5pt;
      left: -1.5pt;
      z-index: 900;
    }