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

@function fade($c) {
	@return linear-gradient($c, rgba($c, 0) 80%);
}

div {
	/* relevant styles */
	border: solid .125em;
	border-image: fade(#be4c39) 1;
	padding: .125em;
	background: fade(#e18728) content-box;
	
	/* other styles */
	margin: 0 auto;
	width: 5em; height: 3em;
	color: white;
	font: 700 2em/2 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.