<div class="item item--1">
	<div class="item item--2">
		<div class="item item--3">
			<div class="item item--4">
				<div class="item item--5">
					<div class="item item--6">
						<div class="item item--7"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<fieldset>
	<label>
		<strong>border-radius</strong>
		<input type="range" min="0.25" max="15" step="0.25" value="10" oninput="body.style.setProperty('--bdrs', `${this.value}rem`)" />
	</label>
	<label>
		<strong>gap</strong>
		<input type="range" min="0.5" max="2" step="0.25" value="1" oninput="body.style.setProperty('--gap', `${this.value}rem`)" />
	</label>
</fieldset>

body {
	--bdrs: 10rem;
	--gap: 1rem;
	--maw: 25rem;
	padding: 1rem;  
}
.item {
	background-color: var(--bgc);
	border-radius: var(--bdrs);
	max-width: var(--maw);
	padding: var(--gap);
}
.item--1 {
	--bgc: #4691e2;
}
.item--2 {
	--bgc: #0cb764;
	border-radius: calc(var(--bdrs) - (var(--gap) * 1));
}
.item--3 {
	--bgc: #febf18;
	border-radius: calc(var(--bdrs) - (var(--gap) * 2));
}
.item--4 {
	--bgc: #fc8711;;
	border-radius: calc(var(--bdrs) - (var(--gap) * 3));
}
.item--5 {
	--bgc: #ff6455;
	border-radius: calc(var(--bdrs) - (var(--gap) * 4));
}
.item--6 {
	--bgc: #cc1100;
	border-radius: calc(var(--bdrs) - (var(--gap) * 5));
}
.item--7 {
	--bgc: #ef4da4;
	border-radius: calc(var(--bdrs) - (var(--gap) * 6));
}
fieldset {
	font-family: ui-monospace, monospace;
	margin-block: 1rem;
	max-width: var(--maw);
}
label {
	display: flex;
}
strong {
	flex: 0 0 50%;
}