CSS 3: Les effets sur bordures - #1

Le langage CSS n'est toujours pas encore bien géré par tous les navigateurs web mais cela n'empêchera pas son évolution !

Le CSS 3 apporte de nouvelles possibilités de rendus visuels plutôt intéressants.

Pour le moment, le langage n'est pas supporté par tous les navigateurs (seulement Firefox, Konqueror, Opera ou Safari en partie), oubliez Internet Explorer !

Voici le premier billet d'une série d'exemples et nouveautées sur le CSS 3.

Les bordures en CSS3

Bordures colorées et dégradées:

Avez Firefox, vous ne devrez pas avoir de problèmes à voir cette bordure colorée dégradée !

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 10px;
text-align: center;

Bordures avec images:

Il s'agit d'une image car peu de navigateurs gèrent la fonctionnalité pour le moment

border-image: url(border.png) 27 27 27 27 round round;

Bordures arrondies en CSS 3:

Une bordure arrondie sur Firefox et Navigateurs Webkit

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px;
border: 2px solid #FF0000;

• Bordure arrondie pour le coin haut gauche: -moz-border-radius-topleft / -webkit-border-top-left-radius
• Bordure arrondie pour le coin haut droit:-moz-border-radius-topright / -webkit-border-top-right-radius
• Bordure arrondie pour le coin bas gauche:-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• Bordure arrondie pour le coin bas droit:-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Plus d'informations sur le CSS 3 sur l'excellent site: CSS3.info