<style>
p {
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
}
[id^="test"] {
    position: relative;
    pointer-events: none;

    --content: 0;
    --padding: 0;
    --border: 0;
    --margin: 0;

    --content-color: rgba(246, 178, 107, 0.66);
    --padding-color: rgba(255, 229, 153, 0.66);
    --border-color: rgba(147, 196, 125, 0.66);
    --margin-color: rgba(111, 168, 220, 0.66);
}
.expected {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
}
.expected > .margin {
    position: absolute;
    top: 0;
    left: 0;
    width: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
    height: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
    border: var(--margin) solid var(--content-color);
}
.expected > .border {
    position: absolute;
    top: var(--margin);
    left: var(--margin);
    width: calc((var(--padding) * 2) + var(--content));
    height: calc((var(--padding) * 2) + var(--content));
    border: var(--border) solid var(--padding-color);
}
.expected > .padding {
    position: absolute;
    top: calc(var(--margin) + var(--border));
    left: calc(var(--margin) + var(--border));
    width: var(--content);
    height: var(--content);
    border: var(--padding) solid var(--border-color);
}
.expected > .content {
    position: absolute;
    top: calc(var(--margin) + var(--border) + var(--padding));
    left: calc(var(--margin) + var(--border) + var(--padding));
    width: var(--content);
    height: var(--content);
    background-color: var(--margin-color);
}
.actual {
    display: inline-block;
    pointer-events: all;
    width: var(--content);
    height: var(--content);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border) solid transparent;
}
.clear {
    clear: both;
}

#test1 {
    --content: 10px;
    --padding: 20px;
    --border: 30px;
    --margin: 40px;
}

#test2 {
    --content: 100px;
}
#test2 > .expected > .content::after {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(96, 82, 127, 0.8);
    border-radius: 50%;
}
#test2 > .actual {
    float: left;
    shape-outside: ellipse(50%);
}
</style>
<body>
    <div id="test1">
        <div class="expected" hidden>
            <div class="margin"></div>
            <div class="border"></div>
            <div class="padding"></div>
            <div class="content"></div>
        </div>
        <div class="actual"></div>
        <div class="clear"></div>
    </div>

    <hr>

    <div id="test2">
        <div class="expected" hidden>
            <div class="margin"></div>
            <div class="border"></div>
            <div class="padding"></div>
            <div class="content"></div>
        </div>
        <div class="actual"></div>
        <div class="clear"></div>
    </div>

    <p>Inspect this page and hover each test area in the Elements tab.  Click <button>Show Expected</button> to compare with the expected result.</p>
    <script>
let showingExpected = false;
document.querySelector("button").addEventListener("click", (event) => {
    showingExpected = !showingExpected;
    for (let node of document.querySelectorAll(".expected"))
        node.hidden = !showingExpected;
});
    </script>
</body>