Rounded Corners w/ CSS + PNG fall back

cornerBlackOutside.png

corners-usage-snippet.html

 	<div class="roundcorners">
  		<div class="subContent">*** add your content here ***</div>
		<span class="roundcorner rcLeft rcTop insideW">&nbsp;</span> <span class="roundcorner rcLeft rcBottom outsideW">&nbsp;</span> <span class="roundcorner rcRight rcTop insideW">&nbsp;</span> <span class="roundcorner rcRight rcBottom outsideW">&nbsp;</span>
	</div>

cornerWhiteInside.png

cornerWhiteOutside.png

cornerWhiteOutsideNoBdr.png

rounded-corners.css

/* ROUNDED CORNER STYLES */
.roundcorners { position: relative; top: 0; left: 0; }
.oldIE .roundcorners { overflow: visible; }
.roundcornersInnerWrap { position: relative; top: 0; left: 0; }
.roundcorners .insideW { background-image:url("./cornerWhiteInside.png"); }
.roundcorners .outsideW { background-image:url("./cornerWhiteOutside.png"); }
.roundcorners .outsideWNoBdr { background-image:url("./cornerWhiteOutsideNoBdr.png"); }
.roundcorners .outsideB { background-image:url("./cornerBlackOutside.png"); }
.roundcorners .roundcorner { position: absolute; z-index: 1000; display: block; height: 10px; width:10px; }
.roundcorners .rcLeft.rcTop { left: 0; right: auto; top: 0; bottom: auto; background-position: left top; }
.roundcorners .rcRight.rcTop { left: auto; right: 0; top: 0; bottom: auto; background-position: right top; }
.roundcorners .rcLeft.rcBottom { left: 0; right: auto; top: auto; bottom: 0; background-position: left bottom; }
.roundcorners .rcRight.rcBottom { left: auto; right: 0; top: auto; bottom: 0; background-position: right bottom; }
.rcHasBdr .rcLeft.rcTop { left: -1px; right: auto; top: -1px; bottom: auto; background-position: left top; }
.rcHasBdr .rcRight.rcTop { left: auto; right: -1px; top: -1px; bottom: auto; background-position: right top; }
.rcHasBdr .rcLeft.rcBottom { left: -1px; right: auto; top: auto; bottom: -1px; background-position: left bottom; }
.rcHasBdr .rcRight.rcBottom { left: auto; right: -1px; top: auto; bottom: -1px; background-position: right bottom; }

@media screen and ( min-width: 100px ) {
	body .roundcorners { border-radius: 8px; -webkit-background-clip: border-box; -moz-background-clip: border-box; -ms-background-clip: border-box; background-clip: border-box; }
	body .roundtopcorners { border-radius: 8px 8px 0 0; }
	body .roundbtmcorners { border-radius: 0 0 8px 8px; }
	body .roundcorners .roundcorner { display: none; }
}
body .forceimagerounded .roundtopcorners { border-radius: 0; }
body .forceimagerounded .roundbtmcorners { border-radius: 0; }
body .forceimagerounded .roundcorner { display: block; }