Outline gradient - css [duplicate]

Question

I need help with adding gradient to outline. I can't larger height because positioning wouldn't work right. Is there any way? I tried to merge this code with gradient class but gradient worked only for that 1px height. Any suggestions?

    height: 1px !important;
    background: #D3D3D3;    
    position: absolute;
    right: 0px;
    width: 50%;
    top: 50%;
    outline: 3px solid #D3D3D3;  

Thanks, Jan

http://jsfiddle.net/he703uzv/

Answer 1

.outline-border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #47c465;
    border-bottom:10px solid #00deff;
    background-image: 
        linear-gradient(#47c465, #00deff),
        linear-gradient(#47c465, #00deff)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

<div class="outline-border">Hello World!</div>

See Outline Gradient.