Creating a hole in a <div> element

Box shadow support almost all modern browsers, so, you can do what you want (I hope, I understood you right) this way:

html:

<div class="hole"></div>

css:

.hole {
    position: absolute;
    left: 50px;right: 50px;width: 50px;height: 50px;
    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}

So, the block will be transparent, and all around it will be hightlighted with its shadow.

Example: http://codepen.io/anon/pen/ultKh

A new way to solve this, using blend modes, and supporting border-radius, multiple elements... but without support in IE

.back {
	background-color: lightblue;
	width: 400px;
	height: 300px;
	background-image: repeating-linear-gradient(45deg, white 0px,lightblue 40px);
}

.base {
	position: relative;
	left: 10px;
	top: 10px;
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-color: white;
	mix-blend-mode: hard-light;
}

.hole {
	width: 80px;
	height: 50px;
	margin: 10px;
	border: solid 1px red;	
	border-radius: 10px;
	background-color: gray;
}

<div class="back">
	<div class="base">
		<div class="hole">ONE</div>
		<div class="hole">TWO</div>
	</div>
</div>

You can construct a set of frame divs in the following format:

So, one container div, with no/little style applied to it.

Then a set of 4 'border' divs with style applied to them, leavin the central area transparent.