Plugin jQuery para bordas arredondadas

Um plugin que criei para fazer o efeito de bordas arredondadas.

Ele é bem simples, apenas adiciona uma DIV com class .top e/ou .bottom, no elemento que vc o chamar.

jQuery.fn.round = function( settings ){
	var defaults = {
		top: true,
		bottom: true
	}
	settings = jQuery.extend(defaults, settings);
	$this = $( this );

	if( settings.top ) jQuery( $this ).prepend( '<div class="top"></div>' );
	if( settings.bottom ) jQuery( $this ).append( '<div class="bottom"></div>' );

	//jQuery( $this ).css({zIndex: 1});
	return $this;

}

modo de usar:

$(document).ready(function(){
	$("#top").round({top: false});
	$("#content").round();
});

a mágica de novo, está toda do lado do CSS.

ali, como mandei um top: false; para o id=#top, só será criada a div .bottom.

No #content, como não mandei nada, será criada as duas.

Toda a estilização para deixar redondo mesmo, deve ser feito no css. Nesse caso, qndo uso esse meu plugin, costumo trabalhar com background.

Lembrando de dar um position: relative para o container, posicionando com absolute essas divs extras.

.top,
.bottom {
	height: 7px;
	position: absolute;
	left: 0;
	z-index: 2;
	width: 970px;
}
.top {
	background-image: url('../images/bg-box-top.jpg') left top no-repeat;
	top: 0;
}
.bottom {
	background-image: url('../images/bg-box-bottom.jpg') left bottom no-repeat;
	bottom: 0;
}

A vantagem desse plugin, é que vc manterá a tua marcação limpa, sem essas divs ‘vazias’, e sem semântica.

Não fiz nenhum css no plugin, para deixá-lo mais personalizável e robusto, visto que você terá que saber css para usá-lo, portanto, não é bem um plug and play, mas um plug study and play.