实现border边框样式渐变和border-radius效果

<div class="content">
</div>
 .content{
	position:relative;
	width:200px;
 	height: 100px;
  border:1px solid #154e95;
  background: #154e95;    
  border-radius: 8px;
  box-sizing: border-box; 
}
//根据具体想实现border某一边的渐变，利用伪类before和after定位就可以，根据实际情况定位left top
  .content::before{
  	position: absolute;
  	content: "";
    width: 84%;
    height: 2px;
    left: 8%;
    top: -1%;
    background-image:-webkit-linear-gradient(left,rgba(10,43,111,0.4),rgba(0,255,255,0.8),rgba(10,43,111,0.4));
}
.content::after{
    content: "";
    width: 84%;
    height: 2px;
    position: absolute;
    left: 8%;
    top: 99%;
    background-image:-webkit-linear-gradient(left,rgba(10,43,111,0.4),rgba(0,255,255,0.8),rgba(10,43,111,0.4));
}