Alternatively, you can use pseudo-elements to do so 🙂 the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: none;
border: 4px solid #fff;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}<div class="double-border">
<!-- Content -->
</div>If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
/* And so on and so forth, if you want border-ception */
margin: 0 auto;
padding: 3em;
width: 16em;
height: 16em;
position: relative;
}<div class="double-border">
<!-- Content -->
</div>