Faire des coins arrondis avec jQuery

Démos

Sans jQuery

Tout d'abord un bloc sans utiliser jQuery :

Ce cadre tout simple n'utilise pas jQuery et n'a donc pas les coins arrondis...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante, pellentesque vitae, tristique eu, commodo nec, mauris.

code html

<div id="contenu_sans_jquery">
	<p>Ce cadre tout simple utilise  jQuery et n'a donc pas les coins arrondis...</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis 
	pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante, 
	pellentesque vitae, tristique eu, commodo nec, mauris.</p>
</div>

Avec jQuery

Voici l'image de 22px/22px qui va nous servir à "arrondir les angles" : petit rond marron

Et le même bloc en utilisant jQuery pour générer les balises nécessaires afin d'obtenir de jolis coins arrondis

Ce cadre tout simple utilise jQuery et a de jolis coins arrondis...

code html

<div id="contenu_avec_jquery" class="rounded">
	<p>Ce cadre tout simple utilise jQuery et a de jolis coins arrondis...</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis 
	pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante, 
	pellentesque vitae, tristique eu, commodo nec, mauris.</p>
</div>

code javascript


$(document).ready(function(){
	$('div.rounded').wrap('<div class="cadre"></div>');
	$('div.cadre').prepend('<div class="cadre_hd"></div><div class="cadre_hg"></div>');
	$('div.cadre').append('<div class="cadre_bd"></div><div class="cadre_bg"></div>');
});

code de la page généré par le script

<div class="cadre">
	<div class="cadre_hd"></div><div class="cadre_hg"></div>
	<div id="contenu_avec_jquery" class="rounded">
	<p>Ce cadre tout simple n'utilise pas jQuery et a de jolis coins arrondis...</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis 
	pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante, 
	pellentesque vitae, tristique eu, commodo nec, mauris.</p>
	</div>
	<div class="cadre_bd"></div><div class="cadre_bg"></div>
</div>

code css pour styler le tout

.cadre{
	background-color: #bdb194;
	width: 30%;
}
	
.cadre_hg, .cadre_hd,
.cadre_bg, .cadre_bd{
	width: 11px;
	height: 11px;
	background-repeat: no-repeat;
	font-size: 1px;
}

.cadre_hg{
	background: url('cadre_rounded.png') 0 0;
}
.cadre_hd{
	background: url('cadre_rounded.png') 11px 0;
	float: right;
}
.cadre_bg{
	background: url('cadre_rounded.png') 0 11px;
}
.cadre_bd{
	background: url('cadre_rounded.png') 11px 11px;
	float: right;
}

Le code complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
<head>
<title>Coins arrondis avec jQuery et CSS</title>

<style type="text/css">
div#contenu_avec_jquery{
background-color: #bdb194;
padding: 0 5px;
}
div p{ margin: 0; }

/* styles pour le cadre arrondi */
.cadre{
background-color: #bdb194;
width: 30%;
}

.cadre_hg, .cadre_hd,
.cadre_bg, .cadre_bd{
width: 11px;
height: 11px;
background-repeat: no-repeat;
font-size: 1px;
}

.cadre_hg{
background: url('cadre_rounded.png') 0 0;
}
.cadre_hd{
background: url('cadre_rounded.png') 11px 0;
float: right;
}
.cadre_bg{
background: url('cadre_rounded.png') 0 11px;
}
.cadre_bd{
background: url('cadre_rounded.png') 11px 11px;
float: right;
}
</style>

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.rounded').wrap('<div class="cadre"></div>');
$('div.cadre').prepend('<div class="cadre_hd"></div><div class="cadre_hg"></div>');
$('div.cadre').append('<div class="cadre_bd"></div><div class="cadre_bg"></div>');
});
</script>
</head>
<body>
<div id="contenu_avec_jquery" class="rounded">
<p>Ce cadre tout simple utilise jQuery et a de jolis coins arrondis...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante, pellentesque vitae, tristique eu, commodo nec, mauris.</p>
</div>

</body>
</html>

Cette création est mise à disposition sous un contrat Creative Commons.