border
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 border-width
, border-style
et border-color
.
Exemple interactif
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 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 border-width
, border-style
et 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.
Différences entre les bordures et les contours (outlines)
Les bordures et contours sont similaires mais quelques différences les distinguent :
- Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément
- Selon la spécification, les contours ne sont pas nécessairement rectangulaires.
Syntaxe
/* 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
.
Valeurs
<line-width>
-
Voir
border-width
(la valeur par défaut estmedium
). <line-style>
-
Voir
border-style
(la valeur par défaut estnone
). <color>
-
Voir
border-color
. Une valeur de type<color>
qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriétécolor
de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter . |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
Exemples
CSS
.brd {
border: 1px solid black;
}
style {
border: 1px dashed black;
display: block;
}
HTML
<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>
Résultat
Spécifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # propdef-border |
Compatibilité des navigateurs
BCD tables only load in the browser