border-right-color: hsla(0,0%,0%,.31);

dabblet.css

body {
	/**
	 * The first commented line is your dabblet’s title
	 */
	
	background: rgba(255, 255, 255, 1.0);
	min-height: 100%;
	font-family: 'Gandhi Sans';
	font-weight: 900;
	font-size: 2rem;
	color: hsla(0,0%,0%,.87);
	margin: 8px;
	overflow: hidden;
}

.foo {
	width: 33.333%;
	border: 8px solid hsla(0,0%,0%,.87);
	float: left;
	margin: 0;
	padding: 3rem;
	text-align: center;
	box-sizing: border-box;
	transition: .2s ease;
	height: 150px;
	cursor: pointer;
}

.foo:nth-of-type(2) {
	border-left: 0;
	border-right: 0;
}

.foo:hover {
	transform: skewY(-2deg) translateY(11px);
/*	border-right-color: hsla(0,0%,0%,.31);*/
}

.foo:nth-of-type(1):hover {
	border-right-width: 16px;
	color: rgba(102, 181, 192, 1.0);
}

.foo:nth-of-type(2):hover {
	transform: scale(1.0);
	border-width: 0;
	margin-top: 8px;
	color: rgba(214, 148, 156, 1.0);
}

.foo:nth-of-type(3):hover {
	box-shadow: inset 0 78px 0 rgba(251, 215, 73, 1.0);
	font-size: 2.6rem;
	border-left-width: 0;
	padding-top: 86px;
	transform: skewY(2deg) translateY(11px);
	color: rgba(251, 215, 73, 1.0);
}

.clear {
	clear: both;
}

.bar {
	width: 400px;
	text-align: left;
	margin: 100px auto 0;
	left: 0;
	right: 0;
	font-weight: 600;
}

dabblet.html

<div class="foo">PERSON</div>
<div class="foo">BLOG</div>
<div class="foo">KONTAKT</div>
<div class="clear"></div>
<div class="bar">Hallo.

Ich bin Sebastian Blei. Hier finden Sie Informationen über mich.</div>

dabblet.js

// alert('Hello world!');

settings.json

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