css實現div邊框圓角漸變色

div添加漸變色后， 圓角失效。所以用偽元素來實現同時圓角漸變色：

.main{
    width: 400px;
    height: 600px;
    margin: 0rem 1rem;
    padding: 0.5rem 0rem;
    text-align: center;
    background: #e8eced;
    border-radius: 0rem 0.4rem 0.4rem 0rem;
}
.main:after{
    content:'';
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0.6rem;
    right: 1rem;
    background: -webkit-linear-gradient(to bottom,#5fb3fc, #46a1f4);
    background: -moz-linear-gradient(to bottom,#5fb3fc, #46a1f4);
    background: linear-gradient(to bottom,#5fb3fc, #46a1f4);
    border-radius: 0.4rem 0.5rem 0.5rem 0.4rem;
    content: '';
    z-index: -1;
}

<div class="main"></div>