clip-path-inset-corners.html | Explore in Territory

<!DOCTYPE html>
<style>
.container {
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
}

.clip {
    width: 100px;
    height: 100px;
    background-color: green;
}

.test-top-left {
    -webkit-clip-path: inset(0 round 50px 0 0 0);
}

.check-top-left {
    border-radius: 50px 0 0 0;
}

.test-top-right {
    -webkit-clip-path: inset(0 round 0 50px 0 0);
}

.check-top-right {
    border-radius: 0 50px 0 0;
}

.test-bottom-right {
    -webkit-clip-path: inset(0 round 0 0 50px 0);
}

.check-bottom-right {
    border-radius: 0 0 50px 0;
}

.test-bottom-left {
    -webkit-clip-path: inset(0 round 0 0 0 50px);
}

.check-bottom-left {
    border-radius: 0 0 0 50px;
}
</style>
<body>
    <p>You should see 4 green squares each with one rounded corner. You should not see any red.</p>
    <div class="container check-top-left"><div class="clip test-top-left"></div></div>
    <div class="container check-top-right"><div class="clip test-top-right"></div></div>
    <br/>
    <div class="container check-bottom-left"><div class="clip test-bottom-left"></div></div>
    <div class="container check-bottom-right"><div class="clip test-bottom-right"></div></div>
</body>
chromium/third_party/blink/web_tests/css3/masking/clip-path-inset-corners.html
