<div class="clip-border"></div>
.clip-border {
background: #fff;
width: min(90vw, 800px);
height: min(90vh, 600px);
--border-color: hsl(180deg 70% 40%);
--border-width: 10px;
--corner-size: 20px;
--corner-adjustment: 1.25;
// Supporting CSS
--corner-opposite: calc(100% - var(--corner-size));
position: relative;
clip-path: polygon(
var(--corner-size) 0%,
var(--corner-opposite) 0%,
100% var(--corner-size),
100% var(--corner-opposite),
var(--corner-opposite) 100%,
var(--corner-size) 100%,
0% var(--corner-opposite),
0% var(--corner-size)
);
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--border-color);
--inner-corner-size: calc(var(--corner-size) * var(--corner-adjustment));
--inner-corner-opposite: calc(100% - var(--inner-corner-size));
clip-path: polygon(
0% 0%,
0% 100%,
100% 100%,
100% 0%,
var(--inner-corner-size) 0%,
var(--inner-corner-size) var(--border-width),
var(--inner-corner-opposite) var(--border-width),
calc(100% - var(--border-width)) var(--inner-corner-size),
calc(100% - var(--border-width)) var(--inner-corner-opposite),
var(--inner-corner-opposite) calc(100% - var(--border-width)),
var(--inner-corner-size) calc(100% - var(--border-width)),
var(--border-width) var(--inner-corner-opposite),
var(--border-width) var(--inner-corner-size),
var(--inner-corner-size) var(--border-width),
var(--inner-corner-size) 0%
);
}
}
body {
background: hsl(18deg 20% 12%);
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.