use border-image to realize the border color gradient, resulting in an extra border, which was originally set only on the left

<div class="box"></div> 

.box{
        margin: 5px;
     width: 100px;
     height: 100px;
     border-left:10px solid -sharpddd;
     border-image: -webkit-linear-gradient(-sharpddd,-sharp000) 30 30;
     border-image: -moz-linear-gradient(-sharpddd,-sharp000) 30 30;
     border-image: linear-gradient(-sharpddd,-sharp000) 30 30;
}

normal effect:

:

break