orioltf
12/2/2011 - 12:46 AM

Illustrating correct & wrong inner border-radius

Illustrating correct & wrong inner border-radius

/**
 * 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;
}
<div class="outer right"><div>This</div></div>
<div class="outer wrong"><div>NOT this</div></div>