Gradient Borders Test

by Borna Almasi

HTML

<html>
    <body>
        <div class="cornersOnly"></div>
        <div class="horizontalOnly"></div>
        <div class="verticalOnly"></div>
</body>
    </html>

CSS

div {
                background-color: #2390DD;
               border: 25px solid black;
                width: 50px;
                height: 50px;
                margin: 10px;
}
           
            .cornersOnly {
                -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 50 50 50 50 repeat repeat;
            }
           
            .horizontalOnly {
                -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 50 25 50 25 repeat repeat;
            }
           
            .verticalOnly {
                -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 25 50 25 50 stretch stretch;
            }