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>