The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

body {
	background: #f06;
	background: linear-gradient(90deg, #f06, yellow);
	min-height: 100%;
}

button {
	padding: .3em .8em;
	border: 1px solid rgba(0,0,0,0.1);
	background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
	border-radius: .2em;
	box-shadow: 0 .05em .25em rgba(0,0,0,.5);
	color: white;
	text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
	font-size: 125%;
	line-height: 1.5;
	
	margin: 1em 1em;
	/*transform: translateX(1em) translateY(1em) skew(0deg) rotate(0deg);*/
}

button.danger {
	background-color: #c00;
}

button.success {
	background-color: #6b0;
}

button hr {
	height: 0.1em;
	background: currentColor;
}

div.container {
	padding: 1em;
	margin: 4em;
}

div.multiple-borders {
	border: 15px solid hsla(0,0%,100%,.5);
	border-radius: 0.1em;
	background: yellowgreen;
	background-clip: padding-box;
	
	/* Multi borders! */
	box-shadow: 0 0 0 10px #655,
				0 0 0 20px deeppink,
				0px 2px 5px 25px rgba(0,0,0,.6);
}

div.stitched-border {
	color: white;
	background: #655;
	border: 10px solid #655;
	border-radius: 0.5em;
	outline: 4px dashed white;
	outline-offset: -1em;
}

.col-half {
	width: 50%;
	float: left;
	background: pink;
}

dabblet.html

<div class="container multiple-borders">
	<button>Default</button>
	<button class="danger">Danger</button>
	<button class="success">Success</button>
</div>

<div class="container stitched-border">
	<h2>Stitched div!</h2>
</div>

<div class="col-half">
	col-one
</div>
<div class="col-half">
	col-two
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"130","seethrough":"","prefixfree":"1","page":"all"}