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 border-width, border-style et 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 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.

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>.

Valeurs

<line-width>

Voir border-width (la valeur par défaut est medium).

<line-style>

Voir border-style (la valeur par défaut est none).

<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).

Syntaxe formelle

<line-width> || <line-style> || <color>
où 
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
où 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

Compatibilité des navigateurs

Voir aussi

• border-top-left-radius,
• border-top-right-radius,
• border-bottom-right-radius,
• border-bottom-left-radius