Les boîtes et les bordures


Les balises DIV définissent des blocs d'éléments. Il s'agit d'une structure privilégiée pour définir des boîtes telles que des menus ou des encarts.

Le standard CSS propose un certain nombre de propriétés permettant de contrôler précisément les différentes marges. Une bonne maîtrise de ces propriétés permet de créer très facilement des interfaces relativement originales.

Propriété

Valeur description
border[-top -left -bottom -right]-width En points (pt), pouces (in), en cm, en pixels (px), ou en % Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite]
border[-top -left -bottom -right]-color border-left-color: #RRGGBB; Couleur de la bordure [supérieure, de gauche, inférieure ou de droite]
border[-top -left -bottom -right]-style solid (pleine), dashed (en tirets), dotted (en pointillés), double (double et remplie) ou ridge (en 3D) Style de la bordure [supérieure, de gauche, inférieure ou de droite]
border-collapse collapse
separate		 Effet » 3D » ou non
border border:2px dotted yellow;

Raccourci global les propriétés de bordure

exemple :

border:3px solid yellow;
un peu de jaune
border:2px dashed red;
un peu de rouge
border:5px dotted blue;
un peu de bleu
border:5px double green;
un peu de vert
border:6px ridge violet;
un peu de violet
border:7px medium yellow;
un peu de jaune
border:7px thin red;
un peu de rouge
border:5px thick blue;
un peu de bleu
border:10px groove green;
un peu de vert
border:4px hidden violet;
un peu de violet
border:3px inset yellow;
un peu de jaune
border:2px none red;
un peu de rouge
border:5px outset blue;
un peu de bleu
border:1px inherit green;
un peu de vert
border:6px groove violet;
un peu de violet