Skip to content

Instantly share code, notes, and snippets.

@georgeredinger
Forked from LeaVerou/markup.html
Created November 10, 2012 18:16
Show Gist options
  • Save georgeredinger/4051999 to your computer and use it in GitHub Desktop.
Save georgeredinger/4051999 to your computer and use it in GitHub Desktop.
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>
<div class="outer right"><div>This</div></div>
<div class="outer wrong"><div>NOT this</div></div>
{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}
/**
* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment