Arrondi CSS3

Un article de MDC.

[modifier] Introduction

Jusqu’à là l’utilisation d’arrondi lors de la création d’un design web était assez complexe et peut efficace. Heureusement une propriété CSS3 a fait son apparition et rend la création d’arrondi simplissime.

Encore qu’a l’état de brouillon cette propriété CSS3 n’est compatible qu’avec firefox 1.5 et ses versions supérieures.

[modifier] Les arrondis en pratique

La propriété CSS qui contrôle les arrondis est : -moz-border-radius, il est possible de préciser quel coin sera affecté plus précisement via ces propriétés : -moz-border-radius-topright , -moz-border-radius-topleft , -moz-border-radius-bottomright et -moz-border-radius-bottomleft.

Ces propriétés indiquent le rayon du quart ce cercle qui sera tracé pour former l’arrondi, ainsi :

<div style="-moz-border-radius:30px; border: 2px solid black;">
<p>Un peu de de blabla</p>
</div>

Donnera un cadre ayant des angle de rayon de 30pixels :

Ici chaque coin est affecté par la propriété mais vous pouvez bien entendu n'affecter qu'un seul coin :

<div
 style="border: 2px solid black; -moz-border-radius-topleft: 30px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">
<p>Un peu de de blabla</p>
</div>

Ce qui donne :

[modifier] Conclusion

Comme vous pouvez le constater la création d'arrondis avec cette propriété est enfantisime. Les dévelloppeurs se régalerons avec cette propriété qui devrait grandement améliorer le design web.