In response to: css3之rounded corner

Here is a simple example to create 5px radius rounded corner.

Image part:
corner images
for IE7 and above, using PNG images: corner-tl.png, corner-tr.png, corner-bl.png, corner-br.png
for IE6, using non-PNG instead, or try using Unit PNG Fix (unitpngfix.js) to hack.

HTML part:

<div class="round">
	Massive content goes here.
</div>

CSS part:

.round {
	padding:5px;
	background:#238427;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	*padding:0;
}

.wrap-tl {
	background: url(assets/corner_tl.png) top left no-repeat;
	_background: url(assets/corner_tl.gif) top left no-repeat;
}
.wrap-tr {
	background: url(assets/corner_tr.png) top right no-repeat;
	_background: url(assets/corner_tr.gif) top left no-repeat;
}
.wrap-bl {
	background: url(assets/corner_bl.png) bottom left no-repeat;
	_background: url(assets/corner_bl.gif) top left no-repeat;
}
.wrap-br {
	background: url(assets/corner_br.png) bottom right no-repeat;
	_background: url(assets/corner_br.gif) top left no-repeat;
	padding:5px;
}

jQuery part:

$(document).ready(function(){
	if($.browser.msie){
		$('.round').wrapInner('<div class="wrap-tr"><div class="wrap-tl"><div class="wrap-bl"><div class="wrap-br"></div></div></div></div>');
	}
});

Ideally, the jQuery code will made the HTML code looks like the following in IEs.

<div class="round">
	<div class="wrap-tr">
		<div class="wrap-tl">
			<div class="wrap-bl">
				<div class="wrap-br">
					Massive content goes here.
				</div>
			</div>
		</div>
	</div>
</div>