{ Webdesign } Bordures et coins arrondies en css

Ajouter une bordure grâce à la propriété css border

La propriété css border permet d'ajouter un cadre ( bordures ) à vos images mais également à des éléments de type < div > ou < table > etc... L'utilisation est assez simple. La propriété border accepte 3 valeurs ( dans l'ordre ) :

BORDER-WIDTH

Cette élément permet de modifier la taille de la bordure. L'unité la plus généralement utilisée est le pixel, mais rien ne vous empêche d'en utiliser une autre.

Exemple :

.photo {
border-width: 1px;
}

BORDER-STYLE

Elle permet de choisir le style de bordure que vous souhaitez utiliser. Il existe 9 styles de bordures différentes :

• None : aucune bordure
• Dotted : bordure en pointillé
• Dashed : bordure en tirets
• Solid : bordure continue
• Double : bordure en double trait
• Groove : bordure en creux
• Ridge : bordure en saillie
• Inset : bordure en 3d lumière basse
• Outset : bordure en 3d lumière haute

Exemple :

.photo {
border-style: dotted;
}

BORDER-COLOR

Comme son nom l'indique elle permet de changer la couleur de la bordure. Il est possible de lui attribuer une valeur soit :

• Hexadécimal : #ffffff
• Nominative : green
• Rvb : rgb(255,0,0)

Exemple :

.photo {
border-color: green;
}

Maintenant, il est possible de synthétiser ces 3 propriétés en une seul et même ligne ( dans l'ordre toujours ! ) :

.photo {
 border: 2px solid red;
}

Voir des exemples de mise en page pour l'élément border

Arrondir les coins d'un élément grâce à la propriété css border-radius

C'est de loin la propriété que je trouve la plus intéressante car grâce à elle, vous allez pouvoir arrondir les coins de vos images et réaliser ainsi une mise en page plus avancé. Fini les coins carrés ^^ !

Pour arrondir les coins, on va utiliser une valeur en pixel qui s'applique dans le sens des aiguilles d'une montre en partant du premier coin en haut à gauche. Il est possible d'arrondir 1 coin, plusieurs coins ou tous les coins d'une image.

Exemples :

.photo {
border-radius : 10px; /* Une seul valeur pour arrondir tous les coins */
}

.photo {
border-radius : 5px 0px 0px 5px; /* les coins en haut à gauche et en bas à gauche sont arrondis de 5px */
}

.photo {
border-radius : 5px 20px; /*les coins opposés du haut à gauche et en bas à droite sont arrondis de 5px et les 2 autres de 20px*/
}

Pour une meilleur compatibilité avec certains navigateurs

L'élément border-radius; n'est compatible qu'avec Internet Explore 9+, Chrome 4+, FireFox 4.0+, Opera 10.5+ et Safari 5.0+. Pour certains anciens navigateur, il vous suffira d'ajouter à votre css les éléments -moz-border-radius; et -webkit-border-radius; qui prendront exactement la même valeur que border-radius;. Pour les autres, il existe des solution en javascript ( roundies.js par exemple ) avec un rendu plus ou moins bon, que vous trouverez assez facilement avec en effectuant une petite recherche.

Exemple :

.photo {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}

Voir des exemples de mise en page pour l'élément border-radius

Christian Aslan