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.

Le code parle de lui-même...

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;
}					 	
							 	

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

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11