<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;
}