Exemple de techniques pour réaliser des bords arrondis

---

Utilisation de la propriété CSS border-radius

CSS

#cssbox{
    background : #C4E0EB;
    border     : 2px solid #1E4262;
    padding    : 8px;

    -moz-border-radius    : 7px;
    -webkit-border-radius : 7px;
    border-radius         : 7px;
}

HTML

<p id="cssbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis enim, posuere dignissim, pharetra a, tristique sit amet, erat. Fusce lacus. Praesent eget ante sed nulla viverra volutpat. Aenean quis neque et eros congue consequat. Aenean eget augue. Aliquam erat volutpat. Cras luctus nulla eget sapien. Integer sodales hendrerit ante.

---

Utilisation de la propriété CSS border-image

CSS

#cssimgbrd{
    padding : 3px;

    -moz-border-image: url(border.png) 7 repeat;
    -webkit-border-image: url(border.png) 7 repeat;
    border-image: url(border.png) 7 repeat;

    border : 7px solid #1E4262;
}

HTML

<p id="cssimgbrd">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis enim, posuere dignissim, pharetra a, tristique sit amet, erat. Fusce lacus. Praesent eget ante sed nulla viverra volutpat. Aenean quis neque et eros congue consequat. Aenean eget augue. Aliquam erat volutpat. Cras luctus nulla eget sapien. Integer sodales hendrerit ante.

---

Utilisation de la propriété CSS background et un code HTML "adapté"

CSS

.cssbgbrd{
    margin : 1em 0;
}

.cssbgbrd .up{
    padding-right : 7px;
    background : url(border-sprits.png) no-repeat 100% 0;
}

.cssbgbrd .up div{
    height : 7px;
    background : url(border-sprits.png) no-repeat 0 -7px;
}

.cssbgbrd .down{
    padding-right : 7px;
    background : url(border-sprits.png) no-repeat 100% -21px;
}

.cssbgbrd .down div{
    height : 7px;
    background : url(border-sprits.png) no-repeat 0 -14px;
}

.cssbgbrd .middle{
    padding-left : 2px;
    background : url(border-sprits.png) no-repeat 0 -28px;
}

.cssbgbrd .middle p{
    margin : 0;
    padding : 3px 10px 3px 7px;
    background : #C4E0EB url(border-sprits.png) no-repeat 100% -28px;;
}

HTML

<div class="cssbgbrd">
	<div class="up"><div></div></div>
	<div class="middle"><p>Lorem ipsum dolor sit amet...</p></div>
	<div class="down"><div></div></div>
</div>

Résultat

---

Utilisation de Javascript (exemple avec un plug-in jQuery)

CSS

#jsrndbrd{
    background : #C4E0EB;
    border : 2px solid #1E4262;
    padding : 8px;
}

.border{
    background : #1E4262;
    padding : 2px;
    margin : 1em 0;
}

.border p{
    margin : 0;
}

Javascript

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#jsrndbrd')
    .css("border","none")
    .wrap('<div class="border"></div>')
    .corner("round 6px")
    .parent()
    .corner("round 8px");
});
</script>

HTML

<p id="jsrndbrd">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis enim, posuere dignissim, pharetra a, tristique sit amet, erat. Fusce lacus. Praesent eget ante sed nulla viverra volutpat. Aenean quis neque et eros congue consequat. Aenean eget augue. Aliquam erat volutpat. Cras luctus nulla eget sapien. Integer sodales hendrerit ante.

---

Une alternative de l'exemple 3 avec Javascript

CSS

Idem à l'exemple 3

Javascript

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#jsrndbrd2')
    .wrap('<div class="cssbgbrd"><div class="middle"></div></div>')
    .parent().parent()
    .append('<div class="down"><div></div></div>')
    .prepend('<div class="up"><div></div></div>')
});
</script>

HTML

<p id="jsrndbrd2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis enim, posuere dignissim, pharetra a, tristique sit amet, erat. Fusce lacus. Praesent eget ante sed nulla viverra volutpat. Aenean quis neque et eros congue consequat. Aenean eget augue. Aliquam erat volutpat. Cras luctus nulla eget sapien. Integer sodales hendrerit ante.