Bordi arrotondati con jQuery e CSS

Una delle soluzioni più semplici per ottenere bordi arrotondati anche nelle versioni di Internet Explorer inferiori alla 9 è quello di creare una struttura di elementi annidati e quindi assegnare un'immagine di sfondo diversa a ciascun elemento. Purtroppo la marcatura così create è presentazionale e non semantica. Possiamo però generare tale struttura con jQuery. Vediamo come.

Partiamo da questa struttura:

<div id="test">...</div>

Vogliamo generare questa struttura:

<div id="test">
	<div id="top-right">
		<div id="bottom-left">
			<div id="bottom-right">...</div>
		</div>
	</div>
</div>

Con i seguenti stili:

#test {
	width: 20%;
	background: #a40 url(top-left.gif) no-repeat;
	color: #fff;
	font: 76% Arial, sans-serif;
	line-height: 1.3;
	margin: 2em auto;
}

div.top-right {
	height: 100%;
	background: transparent url(top-right.gif) no-repeat 100% 0;
}

div.bottom-left {
	height: 100%;
	background: transparent url(bottom-left.gif) no-repeat 0 100%;
}

div.bottom-right {
	height: 100%;
	background: transparent url(bottom-right.gif) no-repeat 100% 100%;
	padding: 1em;
}

Ecco come possiamo fare con jQuery:

$(function() {

  var topRight = '<div class="top-right"></div>';
  var bottomLeft = '<div class="bottom-left"></div>';
  var bottomRight = '<div class="bottom-right"></div>';
  
  $('#test').
  wrapInner(topRight).
  find('div.top-right').
  wrapInner(bottomLeft).
  find('div.bottom-left').
  wrapInner(bottomRight);
  

});

In pratica abbiamo usato il metodo wrapInner() a cascata combinandolo con il metodo find che viene usato quando l'elemento è già stato inserito nel DOM. Potete visionare l'esempio finale in questa pagina.