{ Webdesign } Bordures et coins arrondies en css

Dim. 17 Fev. 2013

Les bordures et coins arrondis en css sont des éléments graphique utiles, facile à mettre en place et qui bien utilisés, permettent de réalisé de jolies mises en pages de votre contenu.

Voici les différentes propriétés applicables pour les éléments border; et border-radius;

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

Partagez sur les réseaux sociaux

Catégorie

Autres publications pouvant vous intéresser :

Commentaires :

Laisser un commentaire
Aucun commentaire n'a été laissé pour le moment... Soyez le premier !

Articles les plus consultés

OrdiTips - Un Ordi et des Tips

Sur OrdiTips je vous propose des astuces, des tutoriels et plein d'autres choses sur le monde du webdesign, de l'informatique et des appareils mobiles.
Si vous l'avez trouvé intérréssant, je vous invite à faire découvrir OrdiTips auprès de votre entourage :)

Annonces