<div class="layer1">
    <i class="layer1__circle layer1__circle--top-left"></i>
    <i class="layer1__circle layer1__circle--top-right"></i>
    <i class="layer1__circle layer1__circle--bottom-right"></i>
    <i class="layer1__circle layer1__circle--bottom-left"></i>
    <div class="layer2">
        <i class="layer2__circle layer2__circle--top-left"></i>
        <i class="layer2__circle layer2__circle--top-right"></i>
        <i class="layer2__circle layer2__circle--bottom-right"></i>
        <i class="layer2__circle layer2__circle--bottom-left"></i>
    </div>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi ab et eos totam dolor animi! Perferendis, harum? Dolores assumenda earum deleniti reiciendis aut quis quo nihil, hic, accusantium, consequatur delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ex aut eligendi, incidunt quae ipsa alias soluta eaque blanditiis laudantium nemo itaque, aspernatur sit voluptatibus explicabo officiis accusantium quam doloremque! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quasi assumenda. Veniam sint quam soluta voluptate ullam consequuntur nihil mollitia perspiciatis sunt doloribus officia suscipit, accusamus iste eveniet, dolorum nisi.</p>
</div>
* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.layer1 {
    position: relative;
    
    /* width: 700px; */
    /* max-width: 100%; */
    /* height: 250px; */
    margin: 50px auto 0;
    padding: 20px;

    border: 20px solid #F2E3CC;
    overflow: hidden;
    background: transparent;
}

.layer1__circle {
    position: absolute;
    z-index: -1;

    width: 22px;
    height: 22px;

    background: #F2E3CC;
    border-radius: 50%;
}

.layer1__circle--top-left {
    top: -8px;
    left: -8px;
}
.layer1__circle--top-right {
    top: -8px;
    right: -8px;
}
.layer1__circle--bottom-right {
    bottom: -8px;
    right: -8px;
}
.layer1__circle--bottom-left {
    bottom: -8px;
    left: -8px;
}

.layer2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;

    width: 100%;
    height: 100%;
    padding: 10px;

    background: #fff;
    outline: 2px solid #ccc;
    outline-offset: -10px;
}

.layer2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    width: 100%;
    height: 100%;

    border: 8px solid #fff;
}

.layer2__circle {
    position: absolute;
    
    z-index: 1;

    width: 20px;
    height: 20px;

    background: #fff;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.layer2__circle--top-left {
    top: 0;
    left: 0;
}
.layer2__circle--top-right {
    top: 0;
    right: 0;
}
.layer2__circle--bottom-right {
    bottom: 0;
    right: 0;
}
.layer2__circle--bottom-left {
    bottom: 0;
    left: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.