<div>cool!</div>
html { /* just to show an image background */
	height: 100%;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger_lily.jpg);
	background-size: cover;
}

div {
	/* essential styles, 
	 * all that's needed to create the effect */
	border: solid .5em #be4c39;
	padding: .5em;
	background: #e18728 content-box;
	
	/* non-essential, just to prettify the thing */
	margin: 0 auto;
	width: 5em; height: 3em;
	color: white;
	font: 700 2em/3 comic sans ms, verdana, sans serif;
	text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.