CSS Rounded Corners

background-box.css

/* 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-box.css

/* border radius */
/* Firefox, Safari, Chrome, IE9 */
.box {
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  border: 1px solid red;
}

box.html

<div class="box">
  <h2>Some Headline</h2>
  <p>My content.</p>
</div>

css3-pie-box.css

/* 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-box.css

/* 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;
}

onion-box.html

<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-box.css

/* 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;
}

position-box.html

<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-box.css

/* 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;
}

sliding-door-box.html

<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>