--- title: border slug: Web/CSS/border tags: - CSS - Propriété - Reference translation_of: Web/CSS/border ---
La propriété CSS border
est une propriété raccourcie qui permet de définir les propriétés liées à la bordure. border
peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est none
). Ainsi, border
peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.
Note : Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (border
) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.
Les bordures et contours sont similaires mais quelques différences les distinguent :
/* style */ border: solid; /* largeur | style */ border: 2px dotted; /* style | couleur */ border: outset #f33; /* largeur | style | couleur */ border: medium dashed green; /* Valeurs globales */ border: inherit; border: initial; border: unset;
La propriété border
peut être définie grâce à une ou plusieurs valeurs <line-width>
, <line-style>
ou <color>
.
Note : La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est none
.
<line-width>
medium
).<line-style>
none
).<color>
.brd { border: 1px solid black; } style { border: 1px dashed black; display:block; }
<div class="brd">Oh des bordures</div> <p> N'hésitez pas à éditer le CSS qui suit pour voir l'effet des valeurs. </p> <style contenteditable> .brd { border: 1px solid black; } </style>
{{EmbedLiveSample('Exemples')}}
Spécification | État | Commentaires |
---|---|---|
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}} | {{Spec2('CSS3 Backgrounds')}} | La prise en charge du mot-clé transparent est retirée car celui-ci est désormais intégré au type {{cssxref("<color>")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via border , cette dernière la réinitialise quand même avec sa valeur initiale (none ). |
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}} | {{Spec2('CSS2.1')}} | Le mot-clé inherit peut être utilisé et transparent est considéré comme une couleur valide. |
{{SpecName('CSS1', '#border', 'border')}} | {{Spec2('CSS1')}} | Définition initiale. |
{{cssinfo}}
{{Compat("css.properties.border")}}