border CSS propriété

Définition de la CSS border.

La propriété de bordure CSS border est un raccourci qui permet de spécifier le style de la bordure Css (pointillé, solide,...), l'épaisseur de la bordure Css et la couleur de la bordure Css des quatre bordures Css d'un élément (X)HTML.

Exemple de syntaxe CSS border :
border : 2px solid red;
border : 2px dashed rgb(144,238,144);
border : #00FF7F;

La propriété de feuille de style border CSS peut prendre une des valeurs de chaque propriété de bordure CSS suivante :

ou la propriété border CSS peut prendre la valeur de :
  • inherit : valeur seule, hérite des propriétés de bordure Css de son parent (CSS2)

Conditions d'application de la CSS border.

La propriété de bordure CSS border est applicable sur l'ensemble des balises HTML ou XHTML.

Problème d'interprétation de border en Css.

Les propriétés CSS d'épaisseur de bordure Css peuvent poser un problème d'interprétation lié à la taille, si la DTD de votre page n'est pas valide (très vieux navigateurs).
Voir l'explication du bug plus bas

Propriétés CSS utilisées dans le raccourci border.

Spécifier les bordures individuellement

Si vous ne voulez pas utiliser le raccourci de bordure Css border, vous pouvez définir individuellement chaque bordure Css en utilisant une des propriétés de bordure CSS suivante :

  • : définie le style, l'épaisseur et la couleur la bordure Css basse.
  • : définie le style, l'épaisseur et la couleur de la bordure Css haute.
  • : définie le style, l'épaisseur et la couleur de la bordure Css gauche.
  • : définie le style, l'épaisseur et la couleur de la bordure Css droite.
Exemple d'écriture CSS de bordures définies individuellement :
.identifiant{
  border-bottom : 10px double green;
  border-top    : 5px solid #000;
  border-left   : 18px inset rgb(250,250,210);
  border-right  : 1px dashed hsla(39,100%,50%,0.3);
}

Règles de syntaxes CSS pour border.

Règle d'écriture de la Css border

Les valeurs de bordures Css assignées à la propriété de bordure CSS border sont séparées par un espace et leur ordre n'a pas d'importance.
Vous pouvez omettre une ou des valeurs dans ce cas, c'est la valeur par défaut de la propriété de bordure Css omise qui sera prise. Vous trouverez cette informations dans la définition de chaque propriété de la bordure Css.

Compatibilités navigateurs de la propriété border

Détails des versions de la CSS border
Résumé du support navigateurs de la CSS border

Equivalence de la CSS border en HTML.

Peut remplacer l'attribut border de la balise (X)HTML ,, object ou frameset.

Exemples et astuces CSS pour utiliser border

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 Css est à l'intérieur du bloc. La bordure Css 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

Créer un triangle en Css avec les bordures

Il existe une technique CSS basée sur les bordures Css qui permet de faire un triangle en CSS.

Votre avis sur la définition border en CSS

Votez pour la définition CSS border

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/border-css.html Votes: 4.3 / 5 - 29 votes
Cliquez sur une étoile pour voter.