Définir des bordures en CSS3

Introduction
Grâce au CSS3, les bordures deviennent plus personnalisables et offrent désormais la
possibilité d'utiliser des dégradés, des coins arrondis, des ombres et des images.

Continuez la lecture de cette page pour découvrir comment mettre en place des bordures en
CSS3.

Pour commencer, il faut savoir que les spécifications CSS3 n'étant pas terminées, chaque
navigateur reconnait certaines propriétés.

Les propriétés Firefox commencent par "-moz" et celles de Safari/Chrome commencent par
"-webkit".

Pour mettre en place des bordures en CSS3, il faut utiliser les propriétés suivante :

border-color
border-image
border-radius

Focus sur la propriété border-radius

Pour réaliser des bordures arrondies sans CSS3 n'est pas chose évidente. Il existe néanmoins
quelques astuces mais elles ne sont ni simples, ni optimisées. En effet, la plupart du temps il
faut créer plusieurs images, ce qui n'est vraiment pas bon pour le chargement des pages.

Grâce au CSS3, créer une bordure arrondie revient à simplement utiliser une propriétée CSS.

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

Voici un exemple de ce qui est réalisable :

Pour obtenir une zone aux coins arrondis comme ci-dessus, il faut utiliser la propriété
border-radius de la manière suivante :

.my_border_radius {

background-color: #f3de89;
border: 1px solid #1120ed;
border-radius: 5px;

Pour prendre en compte les différentes implémentations des navigateurs, voici la syntaxe à
utiliser pour Firefox, Safari, et Chrome :

.my_border_radius {

border: 5px solid #c4c8cc;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

-webkit-border-bottom-left-radius: 0px;

Focus sur la propriété border-color

Attention, au moment de l'écriture de ce tutoriel, seul Firefox a mis en place cette nouveauté.

Avant la version 3, le CSS permettait d'ajouter des bordures et de les colorer de manière unie.

Le CSS3 nous offre de nouvelles options pour la coloration des bordures : nous pouvons
désormais créer des dégradés :

Voici le code pour réaliser cette bordure :

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

.my_gradient_border_color {

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: 5px 5px 5px 15px;

Comme vous pouvez le constater, il faut préciser chaque couleur présente dans le dégradé.

Focus sur les boîtes à ombre portée

Découverte du concept

Pour réaliser une telle boîte, le code à utiliser est le suivant :

.my_box_shadow {

-moz-box-shadow: 6px 20px 10px #811819;

-webkit-box-shadow: 6px 20px 10px #811819;
box-shadow: 6px 20px 10px #811819;

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

Voici la signification des paramètres :

1. Horizontal length : définit le décalage horizontal de l'ombre

valeur positive : l'ombre sera sur la droite de la boite
valeur négative : l'ombre sera sur la gauche de la boite
0px : l'ombre sera au même niveau que la boite
2. Vertical length : comme ci-dessus mais verticalement
valeur positive : l'ombre sera en dessous de la boite
valeur négative : l'ombre au dessus de la boite
0px : l'ombre sera au même niveau que la boite
3. Blur radius : permet d'affecter un effet de flou à l'ombre (0px : l'ombre sera nette)
4. Il s'agit de la couleur de l'ombre

Il y a également la propriété "Inset". Si elle n'est pas spécifiée, l'ombre est une ombre "portée",
comme si la boîte était soulevée au-dessus du contenu.

Si ce mot-clé est présent, l'effet change et la boite devient "enfoncée" à l'intérieur de l'ombre

Les ombres "inset" sont déssinées au-dessus du fond (banckground) mais en-dessous des
bordures et contenus.

Exemples d'utilisation du mot-clé inset :

Bordure avec une ombre intérieure décalée vers la gauche et le haut de 5px :

.my_box_shadow

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

Bordure avec la même ombre mais avec un effet de flou (blur) de 5px :

.my_box_shadow {

-moz-box-shadow: inset -5px -5px 5px #888;

-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;

Allons plus loin avec les ombres

Pour ceux qui veulent en découvrir plus, voyons la syntaxe exacte de cette propriétée :

box-shadow: none | <shadow> [,<shadow>]*

où nous avons <shadow> définit de cette manière :

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

J'attire votre attention sur le [,<shadow>]*

Cela signifie que nous pouvons définir plusieurs ombres.

Voici un exemple de ce qui est réalisable :

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

.my_box_shadow {

0 0 20px black,
20px 15px 30px yellow,
-20px 15px 30px lime,
-20px -15px 30px blue,
20px -15px 30px red;

Focus sur la propriété border-image et border-corner-image

Une autre fonctionnalité ajoutée est la possibilité d'utiliser des images pour ses bordures. En
fait, le CSS3 peut répéter ou étirer une image de votre choix pour en faire une bordure.

Pour cela, nous allons utiliser la propriété border-image.

Cette propriété prend 5 attributs en paramètres :

source : url de l'image à utiliser comme bordure

slice : valeur qui séparent l'image en la divisant en 9 régions
4 pourcentages
4 nombres représentants des pixels
fill : mot clé qui force l'utilisation du milieu de l'image (par défaut, le milieu est
considéré comme vide)
exemple de "slice" ayant pour valeurs 25% 30% 12% 20% :

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

width (optionnel) : 4 valeurs (nombres ou pourcentages) pour définir la largeur des côtés

outset(optionnel) : permet de renseigner 4 nombres permettant le rendu de l'image à

l'éxtérieur de son conteneur
repeat : spécifie comment les côtés et le centre de l'image sont redimenssionnés et
répétés. Il faut donc renseigner cet attribut 2 fois (1 pour les côtés, 1 pour le centre). S'il
n'est présent qu'une fois, on considère que les 2 sont identiques :
stretch : l'image est étirée pour remplir la zone
repeat : l'image est répétée pour remplir la zone
round : l'image est répétée. Si un nombre entier ne remplit pas la zone, l'image
est adaptée.
space : l'image est répétée. Si un nombre entier ne remplit pas la zone, l'espace
supplémentaire est réparti.

Voyons deux exemples de bordures réalisables à l'aide de cette image :

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Définir des bordures en CSS3

Premier exemple : attribut round

.my_border_image {

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

Deuxième exemple : attribut stretch

.my_border_image {

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

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

 Définir des bordures en CSS3

Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - contact@mistra.fr

Powered by TCPDF (www.tcpdf.org)