<!DOCTYPE html>
<style>
    .test {
        box-sizing: border-box;
        border-image-slice: 20% fill;
        border-style: solid;
        outline: 1px dotted black;
        border-image-source: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" fill="green"/><rect x="20" y="20" width="60" height="60" fill="none" stroke-width="10" stroke="lime"/></svg>');
    }
    .big {
        border-width: 40px;
        width: 200px;
        height: 200px;
    }
    .medium {
        border-width: 20px;
        width: 100px;
        height: 100px;
    }
    .small {
        border-width: 10px;
        width: 50px;
        height: 50px;
    }
</style>
<div class="test big"></div>
<div class="test medium"></div>
<div class="test small"></div>

Add percentage based border-image-slice example
Add percentage based border-image-slice example
