The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
body {	
	background: url('http://csssecrets.io/images/stone-art.jpg');
	min-height: 100%;}
	
.box {
	background: #fff;
	border: 10px solid hsla(0, 0%, 100%, .5);
	background-clip: content-box;
	/* styling */
	max-width: 30em;
	padding: 2em;
	margin: 2em auto 0;
}

.multiple-border-outline {
	background: yellowgreen;
	/*box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,0.6);*/
	border: 10px solid #655;
	outline: 5px solid deeppink;
	outline-offset: -15px;
	box-shadow: 0 2px 5px 1px rgba(0,0,0,0.6);
	
	/* styling */		
	max-width: 30em;		
	padding: 2em;		
	margin: 2em auto 0;
	font-variant: small-caps;
}

.multiple-border {	
	background: yellowgreen;	
	box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 0 0 20px darkblue, 0 2px 5px 15px rgba(0,0,0,0.6);
	
	/* styling */			
	max-width: 30em;
	padding: 2em;
	border-radius: 10px;
	margin: 2em auto 0;
}

.background-image {	
	background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;
	background-origin: content-box;
	
	/* Styling */
	max-width: 10em;
	min-height: 5em;
	padding: 10px;
	color: white;
	font: 100%/1 sans-serif;
	margin-bottom: 20px;
	
}

.background-image-with-calc {
	background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;
	background-position: calc(100% - 20px) calc(100% - 10px);
	/* Styling */
	
	max-width: 10em;
	min-height: 5em;	
	padding: 10px;	
	color: white;
}

.inner-rounding {
	background: tan;
	border-radius: 10px;
	padding: 1em;
	box-shadow: 0 0 0 .6em #655;
	outline: .6em solid #655;
	margin-bottom: 20px;
}

.inner-rounding::first-line {
	text-transform: uppercase;
	font-weight: bold;
}

.striped-background {
	/*background: linear-gradient(#fb3 0, #fb3 30%, red 40%, #58a 30%);*/
	background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
	background-size: 30px 30px;
	
	/* styling */				
	max-width: 30em;
	padding: 3em;
	margin: 2em auto 0;
}

.custom-counter {  
	margin: 0;
	padding: 0;
	list-style-type: none
}
.custom-counter li {
	counter-increment: item;
	margin-bottom: 10px;
	color: white;
}

.custom-counter li::before {
	content: counter(item) ".";
	margin-right: 5px;
	font-size: 80%;
	background-color: rgb(0,200,200);
	color: white;
	font-weight: bold;
	padding: 3px 8px;
	border-radius: 3px;
}

dabblet.html

<div class="box">Box with semi transparent border styling.</div>
<div class=multiple-border> Box with multiple border.</div>
<div class=multiple-border-outline> Box with multiple outline offset border property. The outline property is used when we need only two borders.</div>
<div class=striped-background></div>
<div class=background-image>Code Pirate</div>
<div class=background-image-with-calc>Code Pirate</div>
<div class=inner-rounding><p>This is an element with inner rounding effect.This is an element with inner rounding effect.This is an element with inner rounding effect.
This is an element with inner rounding effect.This is an element with inner rounding effect.This is an element with inner rounding effect.
This is an element with inner rounding effect.This is an element with inner rounding effect.This is an element with inner rounding effect.
This is an element with inner rounding effect.This is an element with inner rounding effect.This is an element with inner rounding effect.
This is an element with inner rounding effect.This is an element with inner rounding effect.This is an element with inner rounding effect.</p></div>

<ol class="custom-counter"> 
	<li>This is the first item</li>
	<li>This is the second item</li>
	<li>This is the third item</li>
	<li>This is the fourth item</li>
	<li>This is the fifth item</li>
	<li>This is the sixth item</li>
</ol>

dabblet.js

// alert('Hello world!');

settings.json

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