Is it possible to have smooth gradient border colors with a 50px border radius?

Question

I'm doubtful this is even possible. But I'm looking to get a smooth rounded button with a left to right gradient in the border. Currently it works to an extent, but its not smooth.

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%);
}