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.