<div class="block">
		<div class="frame-top"></div>
		<div class="frame-bottom"></div>
		<div class="frame-left"></div>
		<div class="frame-right"></div>
	</div>
.block {
		width: 100px;
		height: 100px;
		background-color: #fff;
		position: relative;
		border: 1px solid black;
		margin: 60px;
	}
	
	.frame-top {
		width: 100%;
		height: 30px;
		position: absolute;
		border-left: 1px solid black;
		border-right: 1px solid black;
		top: -40px;
	}
	
	.frame-bottom {
		width: 100%;
		height: 30px;
		position: absolute;
		border-left: 1px solid black;
		border-right: 1px solid black;
		bottom: -40px;
	}
	
	.frame-left {
		width: 30px;
		height: 100%;
		position: absolute;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		left: -40px;
	}
	
	.frame-right {
		width: 30px;
		height: 100%;
		position: absolute;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		right: -40px;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.