Create a gist now

Instantly share code, notes, and snippets.

CSS Rounded Corners
/* multiple backgrounds */
/* Firefox 3.6+, Safari, Chrome, IE 9 */
.box {
background:
url(corner2-tl.png) left top no-repeat,
url(corner2-tr.png) right top no-repeat,
url(corner2-br.png) right bottom no-repeat,
url(corner2-bl.png) left bottom no-repeat,
url(corner-t.png) left top repeat-x,
url(corner-b.png) left bottom repeat-x,
url(corner-l.png) left top repeat-y,
url(corner-r.png) right top repeat-y;
padding: 1px; /* account for missing border */
}
/* border radius */
/* Firefox, Safari, Chrome, IE9 */
.box {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
border: 1px solid red;
}
<div class="box">
<h2>Some Headline</h2>
<p>My content.</p>
</div>
/* border radius */
/* Firefox, Safari, Chrome, IE9 */
.box {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
border: 1px solid red;
behavior: url(PIE.htc);
}
/* Onion Skinned */
/* All browsers */
.box {
padding: 1px; /* account for missing border */
}
.box .bottom {
margin: -1px;
}
.box .content {
padding: 1px; /* account for missing border, stretch to fit content */
margin: -1px -1px -1px 0;
height: 200px; /* duplicate box height */
}
/* background images */
.box.top {
background: url(corner-t.png) left top repeat-x;
}
.box .bottom {
background: url(corner-b.png) left bottom repeat-x;
}
.box .left {
background: url(corner-l.png) left top repeat-y;
}
.box .right {
background: url(corner-r.png) right top repeat-y;
}
.box .top-left {
background: url(corner2-tl.png) left top no-repeat;
}
.box .top-right {
background: url(corner2-tr.png) right top no-repeat;
}
.box .bottom-right {
background: url(corner2-br.png) right bottom no-repeat;
}
.box .bottom-left {
background: url(corner2-bl.png) left bottom no-repeat;
}
<div class="box top">
<div class="bottom">
<div class="left">
<div class="right">
<div class="top-left">
<div class="top-right">
<div class="bottom-right">
<div class="content bottom-left">
<h2>Some Headline</h2>
<p>My content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* Position */
/* Firefox, Safari, Chrome, IE7+ */
.box {
position: relative;
padding: 1px; /* account for missing border */
}
.box .content {
position: relative;
z-index: 2;
}
/* Corners and Sides */
.box .top-left, .box .top-right, .box .bottom-right, .box .bottom-left, .box .top, .box .bottom, .box .left, .box .right {
position: absolute;
z-index: 1;
font-size: 0;
line-height: 0;
}
/* Sides */
.box .top, .box .bottom {
left: 12px;
right: 12px;
height: 12px;
}
.box .left, .box .right {
top: 12px;
bottom: 12px;
width: 12px;
}
.ie7 .box .left, .ie7 .box .right {
bottom: 10px; /* Accounts for padding issue in IE 7 */
}
.box .top {
top: 0;
background: url(corner-t.png) left top repeat-x;
}
.box .bottom {
bottom: 0;
background: url(corner-b.png) left bottom repeat-x;
}
.box .left {
left: 0;
background: url(corner-l.png) left top repeat-y;
}
.box .right {
right: 0;
background: url(corner-r.png) right top repeat-y;
}
/* Corners */
.box .top-left, .box .top-right, .box .bottom-right, .box .bottom-left {
height: 12px;
width: 12px;
}
.box .top-left {
top: 0;
left: 0;
background: url(corner-tl.png) left top no-repeat;
}
.box .top-right {
top: 0;
right: 0;
background: url(corner-tr.png) right top no-repeat;
}
.box .bottom-right {
bottom: 0;
right: 0;
background: url(corner-br.png) right bottom no-repeat;
}
.box .bottom-left {
bottom: 0;
left: 0;
background: url(corner-bl.png) left bottom no-repeat;
}
<div class="box">
<span class="top"></span>
<span class="bottom"></span>
<span class="left"></span>
<span class="right"></span>
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-right"></span>
<span class="bottom-left"></span>
<div class="content">
<h2>Some Headline</h2>
<p>My content.</p>
</div>
</div>
/* Sliding Door */
/* All browsers */
.box {
position: relative;
padding: 13px 1px; /* account for missing border, doctor 100% height */
height: 178px; /* 202 - 24, account for excess padding */
}
.ie6 .box {
height: 178px !important; /* 202 - 24, account for excess padding */
}
.box .content {
position: relative;
z-index: 2;
margin: -12px 0; /* pull up content */
}
.box .top, .box .bottom {
position: relative;
z-index: 1;
height: 12px;
margin: 0 11px;
font-size: 0;
line-height: 0;
}
.box .top {
margin-top: -13px; /* Pull up top */
}
.box .bottom {
margin-bottom: -15px; /* Pull down bottom */
}
.box .top-left, .box .top-right, .box .bottom-left, .box .bottom-right {
position: absolute;
z-index: 1;
height: 12px;
width: 12px;
font-size: 0;
line-height: 0;
}
.box .left, .box .right {
height: 100%;
}
.box .right {
padding: 1px 0; /* stretches margins */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 1px;
margin-right: -1px;
}
.box .left {
padding-left: 1px;
margin-left: -1px;
}
.ie6 .box .left, .ie7 .box .left, .ie6 .box .right, .ie7 .box .right {
position: relative;
z-index: 2;
}
.ie6 .box .right, .ie7 .box .right {
padding: 0 1px 0 0;
width: 100%;
margin: 0;
margin-left: -1px;
right: -2px;
}
.ie6 .box .left, .ie7 .box .left {
padding: 0;
margin: 0;
left: -1px;
}
.box .top-left, .box .bottom-left {
left: -12px;
}
.box .top-right, .box .bottom-right {
right: -12px;
}
/* background images */
.box .top {
background: url(corner-t.png) left top repeat-x;
}
.box .top-left {
background: url(corner-tl.png) left top no-repeat;
}
.box .top-right {
background: url(corner-tr.png) right top no-repeat;
}
.box .bottom {
background: url(corner-b.png) left bottom repeat-x;
}
.box .bottom-left {
background: url(corner-bl.png) left top no-repeat;
}
.box .bottom-right {
background: url(corner-br.png) right bottom no-repeat;
}
.box .left {
background: url(corner-l.png) left top repeat-y;
}
.box .right {
background: url(corner-r.png) right top repeat-y;
}
<div class="box">
<div class="top">
<span class="top-left"></span>
<span class="top-right"></span>
</div>
<div class="left">
<div class="right">
<div class="content">
<h2>Some Headline</h2>
<p>My content.</p>
</div>
</div>
</div>
<div class="bottom">
<span class="bottom-left"></span>
<span class="bottom-right"></span>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment