CSS border 그라데이션

.html

<div class="gradient_border"></div>

.css

.gradient_border{
    width:150px;
    height:150px;
    border-width:20px;
    border-style:solid;
    border-image:linear-gradient(to bottom, red, blue);
    border-image-slice:1;
}

border 에 그라데이션 효과를 주고 싶다면 border-image 에 linear-gradient 로 원하는 색을 설정하고 border-image-slice:1 옵션을 주면 된다.