Bienvenue sur le site de Jef

Définition des cadres ou bordures

Le cadre est situé entre les marges internes et externes de la boîte.
On peut spécifier séparément le style, la couleur et l'épaisseur de chacun des quatre cotés du cadre. Pour définir la bordure, il faut utiliser border: qui doit comporter 3 paramètres:

• l'épaisseur en px ou em
• le style de ligne
• la couleur de la ligne

La syntaxe de bordure est:
border: taille style couleur
C'est-à-dire, plus précisément:

border: border-width border-style border-color

{ border: 1px solid  #090; }

• border:
• border-top:
• border-right:
• border-bottom:
• border-left:

Il existe plusieurs possibilités pour le style de cadre, que l'on peut regrouper ainsi:

• none est la valeur par défaut. Le cadre n'existe pas
• hidden : le cadre a une épaisseur nulle et il n'est pas visible. Cette propriété, très rarement utilisée, est citée ici pour mémoire uniquement
• dotted : le cadre est en pointillé
• dashed : le cadre est en tireté
• solid : le cadre est formé d'un trait plein
• double : le cadre est formé de deux traits pleins séparés
• groove, ridge, inset, outset : le cadre donne une impression de relief

Voici quelques exemples pour comprendre.

bordure simple

.boite	{ border:1px solid  blue; }

<div class="boite"></div>

bordure épaisse en pointillé

.boite	{ border:4px solid  red; }

<div class="boite"></div>

Quelques styles de bordure

{ border-top:3px dashed green; }

{ border-top:3px dotted green; }

{ border-top:3px solid green; }

{ border-top:6px double green; }

souligner avec la bordure

Oui, il est possible de souligner avec la bordure

.souligne { color:blue; 
border-bottom:3px dashed red;}

<p>
<span class="souligne">
Ce texte est souligné!
</span>
</p>

Bordure de style

.boite { width:250px; height:40px;
border-top:   4px dashed red;
border-right: 4px dotted blue;
border-bottom:4px solid yellow;
border-left:  4px dotted green; } 

retour haut de page

Tous les codes