Gradient Borders

Create gradient borders with the border-image property:

border:4px solid;
border-image: linear-gradient(135deg,#FF0000 0%,... #FF00AB 100%)1;

<div class="stripe-1"></div>
<div class="stripe-1 blue-stripe-1"></div>
<div class="stripe-2"></div>
<div class="stripe-2 blue-stripe-2"></div>
<div class="stripe-1 stripe-3"></div>
<div class="stripe-1 stripe-3 blue-stripe-3"></div>
<div class="stripe-2 stripe-4"></div>
<div class="stripe-2 stripe-4 blue-stripe-4"></div>

body{background-color:#283470;}
.stripe-1{
    position:absolute;
    top: 10px;
    left: 10px;
    height: 10px;
    width: 98%;
    background: -webkit-linear-gradient(left,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
    background: linear-gradient(90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-1{
  background: -webkit-linear-gradient(left,#17E1E3,rgba(58, 32, 92,.0));
  background: linear-gradient(90deg,#17E1E3,rgba(58, 32, 92,.0));
  z-index:-1;
  top:20px;
  height:5px;
}

.stripe-2{
    position:absolute;
    top:10px;
    left:10px;
    height: 98%;
    width: 10px;
    background: -webkit-linear-gradient(top,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
    background: linear-gradient(180deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-2{
  gradient(top,#17E1E3,rgba(58, 32, 92,.0));
  background: linear-gradient(180deg,#17E1E3,rgba(58, 32, 92,.0));
  z-index:-1;
  left:20px;
  width:5px;
}

.stripe-3{
  top:auto;
  bottom:10px;
  right:10px;
  left:auto;
  background: -webkit-linear-gradient(right,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
  background: linear-gradient(-90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-3{
  background: -webkit-linear-gradient(right,#17E1E3,rgba(58, 32, 92,.0));
  background: linear-gradient(-90deg,#17E1E3,rgba(58, 32, 92,.0));
  z-index:-1;
  bottom:20px;
  height:5px;
}

.stripe-4{
  top:auto;
  bottom:10px;
  right:10px;
  left:auto;
  background: -webkit-linear-gradient(bottom,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
  background: linear-gradient(-180deg,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
}
.blue-stripe-4{
  gradient(bottom,rgba(58, 32, 92,.0),#17E1E3);
  background: linear-gradient(-180deg,rgba(58, 32,92,.0),#17E1E3);
  z-index:-1;
  right:20px;
  width:5px;
}