Bordures

La couleur et l'épaisseur des bordures

• Les propriétés border-top-color, border-right-color, border-bottom-color, border-left-color et border-color définissent la couleur d'une bordure.
• Les propriétés border-top-width, border-right-width, border-bottom-width, border-left-width et border-width spécifient les valeurs d'épaisseur des bordures;

  les valeurs peuvent être thin (fine), medium (moyenne) et thick (épaisse), ou une valeur en pixels.

• Exemples :

  Code CSS :

  <p style="margin:6px; padding:6px;
    border-style:solid;
    border-top-width:1px; border-top-color:red;
    border-right-width:3px; border-right-color:violet;
    border-bottom-width:5px; border-bottom-color:orange;
    border-left-width:7px; border-left-color:yellow">
    Des bordures avec des couleurs et des épaisseurs différentes
  </p>
  <div style="width:100px; height:40px; margin:3px;
    border: thick red solid">
  </div>

  Dans le navigateur :

  Des bordures avec des couleurs et des épaisseurs différentes

Les types de bordures

• La propriété border-style spécifie le dessin des bordures d'une boîte.
• Le tableau ci-dessous illustre les différentes possibilités :

  	solid	pleine
  	none	pas de bordure
  	dashed	tirets
  	dotted	pointillée
  	double	deux traits pleins
  	groove	l'impression qu'elle est gravée dans le canevas
  	ridge	la bordure semble sortir du canevas
  	inset	l'impression que la boîte entière est incrustée dans le canevas
  	outset	l'impression que la boîte entière est extrudée du canevas