CSS border experiments

dabblet.css

/**
 * CSS border experiments
 */
.bd {
	display: inline-block;
	border-top: 100px solid #e55;
	border-left: 100px solid #e55;
	border-right: 100px solid #e55;
	border-bottom: 100px solid #e55;
	width: 1px;
	height: 0px;
	background: #000;
}

.bdt {
	border-top-color: #000;
}

.bdl {
	border-left-color: #000;
}

.bdr {
	border-right-color: #000;
}

.bdb {
	border-bottom-color: #000;
}

dabblet.html

<div class="bd"></div>
<div class="bd  bdt"></div>
<div class="bd  bdr"></div>
<div class="bd  bdl"></div>
<div class="bd  bdb"></div>
<div class="bd  bdb  bdr"></div>
<div class="bd  bdt  bdl"></div>
<div class="bd  bdb  bdr"></div>
<div class="bd  bdt  bdl"></div>

settings.json

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