border-image-gradient-sides-and-corners.html

<html>
<head>
    <style>
        div {
            background-color: blue;
            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;
        }
    </style>
</head>
<body>
    <div class="cornersOnly"></div>
    <div class="horizontalOnly"></div>
    <div class="verticalOnly"></div>
</body>
</html>

chromium/third_party/blink/web_tests/fast/gradients/border-image-gradient-sides-and-corners.html