是否可以使用50px边框半径的平滑渐变边框颜色？

Question

我怀疑这甚至是可能的。但我希望在边框中获得一个从左到右渐变的光滑圆形按钮。目前它在一定程度上起作用，但它并不顺利。

http://codepen.io/pen/YqaELP

.button {
    padding:10px 30px;
    border-radius:50px;
    color: #3498DB;
    border-left: 2px solid #3498DB;
    border-right: 2px solid #FFC50A;
    font-size: 1.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 0 100% ;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    background-size: 100% 2px;
    background-image: -webkit-linear-gradient(left, #3498DB 0%, #FFC50A 100%), -webkit-linear-gradient(left, #3498DB 0%, #FFC50A 100%);
    background-image: -moz-linear-gradient(left, #3498DB 0%, #FFC50A 100%), -moz-linear-gradient(left, #3498DB 0%, #FFC50A 100%);
    background-image: -o-linear-gradient(left, #3498DB 0%, #FFC50A 100%), -o-linear-gradient(left, #3498DB 0%, #FFC50A 100%);
    background-image: linear-gradient(to right, #3498DB 0%, #FFC50A 100%), linear-gradient(to right, #3498DB 0%, #FFC50A 100%);
}