Les Bordures.

Outline

A la différence des bordures, les contours ne rentrent pas dans le flux du document et ne modifient dont pas la mise en page. N'occupant pas d'espace dans le document, une bordure large peut apparitre ou disparaitre sans modifier la mise en page, d'où le rajout de la valeur margin-bottom: 15px; dans l'exemple suivant, sinon la bordure mauve aurait chevauchée le div du code placé en dessous. Avec les éléments de type inline, les contours ne sont pas obligatoirement rectangulaires ou carrés, ils peuvent créer une 'bordure' qui entoure l'élément. Par contre, à la différence des bordures, les contours n'acceptent qu'un mot clé pour les valeurs: 'outline-style', 'outline-width' et 'outline-color' au lieu de quatre pour les bordures.

Ce div à une bordure bleue et un outline mauve.
div.example01 {
margin-bottom: 15px;
padding: 15px;
border: 3px solid  #55A0FF; /* bleu */
background-color: #D4D5E3;
outline: 5px solid #D16DBA; /* mauve */
outline-offset: 0px;
}
								
Ici, outline-offset: 10px;
Ici, outline-offset: -10px;

Border

L'attribut Border, en notation raccourcis comme ci-dessous est suivit par trois valeurs, la taille de la bordure, son style et sa couleur. L'ordre des valeurs n'a pas d'importance. Par contre, définit de cette manière, les quatre bordures patageront les mêmes valeurs.

Ce div à une bordure bleue.
.exemple04 {
 margin-bottom: 15px;
 padding: 15px;
 border: 3px solid #55A0FF; /* bleu */
 background-color: #D4D5E3;
}							 	
							 	

Il est aussi possible de définir chacune des bordures par paires, par trois ou bien individuellement en utilisant les attributs: border-width, border-style et border-color. En utilisant les valeurs par paires, les styles s'appliquent comme suit: haut-bas et gauche-droite. Par trois: haut, gauche-droite et bas. Individuellement: haut, droite, bas, gauche.

Ce div à des bordures mixtes.
.exemple05 {
 margin-bottom: 15px;
 padding: 15px;
 
 border-style: solid dotted double;  /* haut, gauche-droite, bas */
 
 border-width: 7px 3px;  /* haut-bas, gauche-droite */ 
 
 border-color: #D16DBA  #55A0FF;    /* haut-bas, gauche-droite */

 background-color: #D4D5E3;
}							 	
							 	
Ce div à des coins arrondis.
.exemple06 {
 margin-bottom: 15px;
 padding: 15px;
 
 border: solid 5px; 
 border-color: #D16DBA  #55A0FF #D16DBA #55A0FF; 
 border-radius: 15px 0px 15px 0px; /* haut-gauche, haut-droit, bas-droit, bas-gauche */

 background-color: #D4D5E3;
}						 	
							 	

On peut aussi ne définir qu'une seule valeur.

valeur unique de définie.
.exemple07 {
 margin-bottom: 15px;
 padding: 15px;
 
 border-left: 10px solid #D16DBA;
 
 background-color: #D4D5E3;
}
						 	
							 	


Box-shadow, bordures multiples.

Box-shadow peut accepter cinq valeurs comme suit: La première valeur définit le décalage sur l'axe des X, soit l'axe horizontale. La deuxième définit le décalage sur l'axe des Y, soit l'axe vertivcale. Ces deux valeurs peuvent être soient positives, soient négatives. Si les deux sont définies à '0', alors l'ombre se place derrière l'élément comme dans la Box 03. La troisième valeur génère un effet de flou (diffusion) sur l'ombre, si cette dernière est à '0', l'ombre aura un tracé net. La quatrième valeur correspond à la taille de l'ombre ou son étalement. Si elle est définie à '0', elle aura la même taille que l'élément, voir la Box 02. La cinquième valeur correspond à la couleur.

Multiples bordures.
.exemple08 {
 border: 5px solid #D16DBA;
 
 padding: 5px;
 background: #B14297;
 
 box-shadow:
 0 0 0 5px #8E2175,
 0 0 0 10px #5C1B4E,
 0 0 0 15px #2E1A29;

 margin-top: 25px;
 margin-bottom: 25px;
}					 	
							 	

Box 01

Box 02

Box 03

Box 04

.box-01 {
box-shadow: 8px 8px 15px 10px #55A0FF;
}
	
.box-02 {
box-shadow: 8px 8px 0 0 #55A0FF;
}	

.box-03 {
box-shadow: 0 0  8px 8px #55A0FF;
}

.box-04 {
box-shadow: -8px -8px  0 12px #55A0FF;
}
								

Il est possible de rajouter la valeur 'inset' à la proprité 'Box-shadow'. Mais au lieu d'une ombre porté, l'ombre est interne à l'élément. Même code que précédement mais avec la valeur 'inset'.

Box 05

Box 06

Box 07

Box 08

.box-05 {
box-shadow: inset 8px 8px 15px 10px #55A0FF;
}
	
.box-06 {
box-shadow: inset 8px 8px 0 0 #55A0FF;
}	

.box-07 {
box-shadow: inset 0 0  8px 8px #55A0FF;
}

.box-08 {
box-shadow: inset -8px -8px  0 12px #55A0FF;
}
								

En résumé:

.box {
box-shadow: decalX decalY Blur étalement couleur;
}
								

En détail.

il est possible de n'utiliser que deux, trois ou quatre valeurs. Avec deux valeurs, seuls le offset-x et offset-y sont définis. Avec la troisième, se sera le blur et la quatrième, le spread. Soit dans cet ordre:

.box {
box-shadow: decalX | decalY | Blur | spread | color;
}
								

Attention cependant, si color n'est pas définie, certains navigateurs mettront la valeur à transparent !

Quelques effets interressants.

Box 09

Box 10

Box 11

.box-09 {
box-shadow: 0 10px 10px -5px black; 
}

.box-10 {
border-radius: 50%;
box-shadow: inset 0 10px 8px -1px #23001B, 0 20px 15px -5px #23001B;
}

.box-11 {
box-shadow: 0 0 20px black, /* spread  0 */
  20px  15px 30px yellow,
 -20px  15px 30px lime,
 -20px -15px 30px blue,
  20px -15px 30px red;

}
								

Articles connexes:

Bouton et design responsiv (CSS).[ GO! ]

Les bordures (CSS).[ GO! ]

Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 30/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11