Cacher is the code snippet organizer for pro developers

/**
 * Multiple Borders
 */
* {
	box-sizing: border-box;
}
body {
	background: #f1f1f1;
	margin: 4%;
	color: #535353;
	line-height: 1.6;
}
.box {
	width: 100%;
	padding: 10%;
	margin: 4% auto;
	background: #99ddff;
	box-shadow: 0 0 0 20px #655,
            0 0 0 30px deeppink,
            0 0 0 35px gold,
            0 0 10px 40px rgba(0,0,0,.1);
    margin: 15% auto;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
}
.wrapper {
	width: 60%;
	background: #fff;
	margin: 0 auto;
	padding: 2% 3%;
}
h1 {
	margin: 0;
}

<div class="wrapper">
	<h1>Fun Borders</h1>
	<p>Hello this is something cool! 
	Here's some text inside a box, and the borders are overflowing! 
	They are actually not borders, but box-shadows.</p>
	<p>Hello this is something cool! 
	Here's some text inside a box, and the borders are overflowing! 
	They are actually not borders, but box-shadows.</p>	
	<div class="box">a picture frame of sorts</div>
	<p>Hello this is something cool! 
	Here's some text inside a box, and the borders are overflowing! 
	They are actually not borders, but box-shadows.</p>
	<p>Hello this is something cool! 
	Here's some text inside a box, and the borders are overflowing! 
	They are actually not borders, but box-shadows.</p>
</div>

// alert('Hello world!');

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}