Illustrating correct & wrong inner border-radius

dabblet.css

/**
 * Illustrating correct & wrong inner border-radius
 */

.outer {
	padding: 10px;
	margin: 50px;
	border: 1px solid silver;
	box-shadow: 0 0 10px gray;
	border-radius: 20px;
}

div div {
	padding: 30px;
	background: slategray;
	font-size: 200%;
	font-weight: bold;
	color: white;
	border-radius:10px;
}

.outer.wrong div {
	border-radius: inherit;
}

dabblet.html

<div class="outer right"><div>This</div></div>
<div class="outer wrong"><div>NOT this</div></div>

settings.json

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