Définition de la css border

Propriété css : border

Détails des versions feuilles de style css border
css1
css2
Détails de compatiblilité de la feuilles de style css border pour les navigateurs
Netscape 6+
Internet Explorer 4+
Mozilla + et Firefox +
Safari 1 +
Internet Explorer 7+

Définition de border

La propriété de feuille de style css border permet de spécifier en une seule déclaration les propriétés des quatre bordures d'un élément.
Exemple de code :
identifiant{
  border: 2px solid red;
}

La propriété de feuille de style border css peut prendre les valeurs des propriétés css (dans l'ordre) de :
- border-width, taille de la bordure,
- border-style, style de la bordure,
- border-color, couleur de la bordure.
Vous pouvez omettre une ou des valeurs.
- inherit, valeur seule, hérite de son parent (css 2).
Il est possible de spécifier individuellement des propriétés pour chaque bordure grâce entre autre :
- border-top, ...
- border-bottom, ...
- border-left, ...
- border-right, ...

Descendre
Remonter

Exemple de code border

Application de border

La propriété de feuille de style css border est applicable sur l'ensemble des balises HTML ou XHTML.

Descendre
Remonter

Problèmes de border

Les propriétés de feuille de style css d'épaisseur de bordure peuvent poser un problème d'interprétation lié à la taille, si la DTD de votre page n'est pas valide.
Voir l'explication du bug plus bas

Descendre
Remonter

FAQ

Répond aux questions suivantes :

Comment créer ou enlever, supprimer une bordure?
Comment donner ou spécifier une couleur de bordure?
Comment donner ou spécifier une taille ou épaisseur de bordure?
Comment donner ou spécifier le style de bordure?
Comment enlever la bordure d'une image?
Liste des questions les plus fréquemment posées en css.
Descendre
Remonter

Exemples / Astuces

Descendre
Remonter

Problème d'interprétation de border

Internet explorer 5.+ et 6.+ ont leur propre manière d'interpréter les BORDER suivant la DTD (DocType) spécifiée dans la page.

Si la DTD est :
Exemple de code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
alors la bordure est à l'intérieur du bloc. La bordure est donc incluse dans la taille (width) du bloc. C'est spécifique Internet Explorer.

Si la DTD est
Exemple de code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ou Transitional idem pour le XHTML1.0 (sauf si<?xml version="1.0"?>) alors Internet Explorer va interpréter le BORDER suivant le standard.
La longueur de votre bloc sera de :
W+Bd+BG
W = taille que vous avez spécifiée,
Bd = taille de la bordure droite,
Bg = taille de la bordure gauche.
Votre bloc sera donc plus grand.
Cela sera de même pour la hauteur.
C'est ce cas, qui est interprété par les autres navigateurs

Descendre
Remonter

BUG INTERNAUTE

Explication

Vous trouverez ci-dessous divers bugs d'interprétation de la css border.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.

Reporter un bug

Voir les Bugs[1]

Descendre
Remonter

Reporter un bug ou problème d'interprétationavec la propriété border
La propriété de feuille de style css BORDER-WIDTH permet de spécifier l'épaisseur des quatre bordures d'un élément..identifiant{ BORDER-WIDTH : 1px; ...[Voir]La propriété de feuille de style css BORDER-BOTTOM permet de spécifier le style, l'épaisseur et la couleur de la bordure basse d'un élément. .identifi...[Voir]La propriété de feuille de style css BORDER-LEFT permet de spécifier le style, l'épaisseur et la couleur de la bordure gauche d'un élément..identifian...[Voir]La propriété de feuille de style css BORDER-COLOR permet de spécifier la couleur des quatre bordures d'un élément..identifiant{ BORDER-COLOR : red; }...[Voir]La propriété de feuille de style css BORDER-STYLE permet de spécifier le style de la bordure d'un élément.identifiant{ BORDER-STYLE : solid; } La pro...[Voir]La propriété de feuille de style css BORDER-TOP permet de spécifier le style, l'épaisseur et la couleur de la bordure haute d'un élément. .identifiant...[Voir]La propriété de feuille de style css BORDER-RIGHT permet de spécifier le style de la bordure droite, l'épaisseur de la bordure droite et la couleur de...[Voir]