border

Résumé

La propriété CSS border est un raccourci pour définir les valeurs des propriétés de toutes les bordures dans une seule et unique règle CSS. border peut être utilisée pour définir les valeurs des propriétés longues suivantes : border-width, border-style, border-color.

Comme pour toutes les propriétés raccourcies, si une valeur des propriétés longues manque, elle est alors initialisée à sa valeur par défaut. De plus, Il est important de noter que border-image, bien que non paramétrable via cette propriété raccourcie, est également réinitialisée à sa valeur par défaut. Cela permet d'utiliser border pour réinitialiser les attributs définis antérieurements dans la cascade. Comme le W3C a l'intention de garder cette propriété dans les futures versions de la spécification, il est recommandé d'utiliser cette méthode pour réinitialiser les attributs border.

  • Valeur initiale La concaténation des valeurs initiales des propriétés associées :
    • border-width: La concaténation des valeurs initiales des propriétés associées :
      • border-bottom-width: medium
      • border-left-width: medium
      • border-right-width: medium
      • border-bottom-width: medium
    • border-style: La concaténation des valeurs initiales des propriétés associées :
      • border-bottom-style: none
      • border-left-style: none
      • border-right-style: none
      • border-bottom-style: none
    • border-color: La concaténation des valeurs initiales des propriétés associées :
      • border-bottom-color: currentColor
      • border-left-color: currentColor
      • border-right-color: currentColor
      • border-top-color: currentColor
  • S'applique à tous les éléments. S'applique aussi à ::first-letter.
  • Héritée non
  • Pourcentages
  • Média visual
  • Valeur calculée comme chacune des propriétés du raccourci:
    • border-width: comme chacune des propriétés du raccourci:
    • border-style: comme chacune des propriétés du raccourci:
      • border-bottom-style: comme spécifié
      • border-left-style: comme spécifié
      • border-right-style: comme spécifié
      • border-top-style: comme spécifié
    • border-color: comme chacune des propriétés du raccourci:
      • border-bottom-color: si la valeur est translucide, la valeur calculée est la fonction rgba()correspondante. Sinon, la fonction rgb()correspondante. Le mot-clé transparent devient rgb(0,0,0).
      • border-left-color: si la valeur est translucide, la valeur calculée est la fonction rgba()correspondante. Sinon, la fonction rgb()correspondante. Le mot-clé transparent devient rgb(0,0,0).
      • border-right-color: si la valeur est translucide, la valeur calculée est la fonction rgba()correspondante. Sinon, la fonction rgb()correspondante. Le mot-clé transparent devient rgb(0,0,0).
      • border-top-color: si la valeur est translucide, la valeur calculée est la fonction rgba()correspondante. Sinon, la fonction rgb()correspondante. Le mot-clé transparent devient rgb(0,0,0).
  • Animable pour chaque propriété individuelle de la propriété raccourcie :
    • border-color: pour chaque propriété individuelle de la propriété raccourcie :
      • border-bottom-color: oui, comme une couleur
      • border-left-color: oui, comme une couleur
      • border-right-color: oui, comme une couleur
      • border-top-color: oui, comme une couleur
    • border-style: non
    • border-width: pour chaque propriété individuelle de la propriété raccourcie :
      • border-bottom-width: oui, comme une longueur
      • border-left-width: oui, comme une longueur
      • border-right-width: oui, comme une longueur
      • border-top-width: oui, comme une longueur
  • Ordre canonique l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

border: <br-width> || <br-style> || <color>

Valeurs

border-width
Si absent, la valeur par défaut est medium. Voir border-width.
border-style 
Si absent, la valeur par defaut est none. Voir border-style.
border-color 
Si absent, la valeur de la propriété color est utilisée. Voir border-color.

Exemples

Voir l'exemple sur une page

element { 
    border: 1px solid #000;
}

Notes

Alors que les propriétés border-width, border-style et border-color acceptent jusqu'à quatre valeurs (une pour chaque côté), cette propriété n'accepte qu'une valeur pour chaque propriété.

Spécifications

Spécification Statut Commentaire
CSS Backgrounds and Borders Module Level 3
La définition de 'border' dans cette spécification.
Candidat au statut de recommandation  
CSS Level 2 (Revision 1)
La définition de 'border' dans cette spécification.
Recommendation  
CSS Level 1
La définition de 'border' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base 1.0 (1.7 ou moins) 1.0 4.0 3.5 1.0 (85)
Fonction Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support de base 1.0 (1.9.2) ? ? ? 1.0

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : vava, teoli, ksad, FredB, tregagnon, Yuichiro, Mgjbot, Fredchat, Kyodev, VincentN
Dernière mise à jour par : vava,