css边框渐变，并且需要设置圆角

css设置边框渐变，并且设置圆角

单纯的设置background-image 和border-radius，是不行的，边框渐变是有了，但是圆角不能出来：
.roadline-box{
width: 200px;
height:200px;
border:1px solid red;
border-radius:20px;
border-image:linear-gradient(to right, #E7C737,#28B35B) 1 10;
border-image:-webkit-linear-gradient(to right, #E7C737,#28B35B) 1 10;
border-image:-o-linear-gradient(to right, #E7C737,#28B35B) 1 10;
}
那么我们应该怎么做呢？可以使用下面的方法：
设置两个div，外层div和里面的div圆角设置一样的，并且外层dive设置padding为1px，这样就既有圆角又可以让边框渐变 ，下面再贴上css样式代码：
.roadline-box{
width: 200px;
background:linear-gradient(to right, #E7C737,#28B35B);
background:-webkit-linear-gradient(to right, #E7C737,#28B35B);
background:-o-linear-gradient(to right, #E7C737,#28B35B);
padding: 1px;
border-radius:20px;
}
.box-inner{
width: 200px;
height:200px;
border-radius:20px;
background: #ffffff;
}

html代码：

记录问题，希望和大家一起学习哈！

以上为作者原创，转载必须附上来源！