<div class='box'></div>
:root {
	--r: 3em;
}
.box { /* these are all the essential styles */
	overflow: hidden;
	position: relative;
	margin: .25em auto;
	min-width: 15em;
  max-width: 15em;
  min-height: 10em;
	border-radius: 1em;
	
	&:before {
    position: absolute;
		margin: calc(var(--r) * -1);
    padding: var(--r);
		border-radius: 50%;
		box-shadow: 0 0 0 300px rgba(#95a, .75);
    content: ''
  }
}

/* JUST PRETTYFYING STUFF, NOT ESSENTIAL FOR A WORKING DEMO */
html {
	$over-c: rgba(invert(#222), .5);
	min-width: 10em; 
	height: 100%;
	background: 
		linear-gradient($over-c, $over-c), 
		url(https://images.unsplash.com/photo-1510920018318-3b4dfe979e4d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=76eda3022d9860f69a7fc7a94e46c3e6) 0 0 / cover
}

body {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
View Compiled
const _SR = document.getElementById('sr'), 
			_O = _SR.nextElementSibling.querySelector('output');

let v;

function update() {
	if(v !== +_SR.value) {
		document.body.style.setProperty(`--sr`, _O.value = v = +_SR.value)
	}
};

update();

addEventListener('change', update, false);
addEventListener('input', update, false);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.