mozilla
Vos résultats de recherche

    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 toues 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éthod 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
    • 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 Candidate Recommendation  
    CSS Level 2 (Revision 1) Recommendation  
    CSS Level 1 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 : 
    Contributors to this page: tregagnon, Fredchat, Yuichiro, VincentN, FredB, teoli, Mgjbot, ksad, Kyodev
    Dernière mise à jour par : teoli,
    Masquer la barre latérale