<!DOCTYPE html>
<style>
.container {
    width: 100px;
    height: 100px;
    /* We have red in the expected results because a small amount seeps through
    the rounded corner in the test, so without putting red underneath the
    green, there is a very small difference in the test and the expected
    result.*/
    background-color: red;
    display: inline-block;
}

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

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

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

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

.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 check-top-left"></div></div>
    <div class="container check-top-right"><div class="clip check-top-right"></div></div>
    <br/>
    <div class="container check-bottom-left"><div class="clip check-bottom-left"></div></div>
    <div class="container check-bottom-right"><div class="clip check-bottom-right"></div></div>
</body>