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-bottom-width: la longueur absolue ou 0 si border-bottom-style vaut none ou hidden
    • border-left-width: la longueur absolue ou 0 si border-left-style vaut none ou hidden
    • border-right-width: la longueur absolue ou 0 si border-left-style vaut none ou hidden
    • border-top-width: la longueur absolue ou 0 si border-left-style vaut none ou hidden
  • 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

Compatibilité des navigateurs

Voir également

• Border-related properties: border, border-width, border-style, border-color, margin, padding
• Padding-related properties: padding, padding-top, padding-right, padding-bottom, padding-left, border, margin
• Margin-related properties: margin, margin-top, margin-right, margin-bottom, margin-left, border, padding
• Outline-related properties: outline, outline-width, outline-style, outline-color, outline-offset