border

Aller à :

Syntaxe
Exemples
Spécifications
Compatibilité des navigateurs
Voir aussi

La propriété 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, border-color.

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 <br-width>, <br-style> ou <br-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

<br-width>: Voir border-width (la valeur par défaut est medium).
<br-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

<br-width> || <br-style> || <color>où 
<br-width> = <length> | thin | medium | thick
<br-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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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

Spécification	État	Commentaires
CSS Backgrounds and Borders Module Level 3 La définition de 'border' dans cette spécification.	Candidat au statut de recommandation	La prise en charge du mot-clé `transparent` est retirée car celui-ci est désormais intégré au type `<color>`. En pratique, cela n'a pas d'impact. Bien que `border-image` ne puisse être définie via `border`, cette dernière la réinitialise quand même avec sa valeur initiale (`none`).
CSS Level 2 (Revision 1) La définition de 'border' dans cette spécification.	Recommendation	Le mot-clé `inherit` peut être utilisé et `transparent` est considéré comme une couleur valide.
CSS Level 1 La définition de 'border' dans cette spécification.	Recommendation	Définition initiale.

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `border-width`: pour chaque propriété individuelle de la propriété raccourcie : `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: pour chaque propriété individuelle de la propriété raccourcie : `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `border-color`: pour chaque propriété individuelle de la propriété raccourcie : `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter`.
Héritée	non
Média	visuel
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `border-width`: pour chaque propriété individuelle de la propriété raccourcie : `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-right-style` vaut `none` ou `hidden` `border-top-width`: la longueur absolue ou `0` si `border-top-style` vaut `none` ou `hidden` `border-style`: pour chaque propriété individuelle de la propriété raccourcie : `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`: pour chaque propriété individuelle de la propriété raccourcie : `border-bottom-color`: couleur calculée `border-left-color`: couleur calculée `border-right-color`: couleur calculée `border-top-color`: couleur calculée
Type d'animation	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`: une couleur `border-left-color`: une couleur `border-right-color`: une couleur `border-top-color`: une couleur `border-style`: discrète `border-width`: pour chaque propriété individuelle de la propriété raccourcie : `border-bottom-width`: une longueur `border-left-width`: une longueur `border-right-width`: une longueur `border-top-width`: une longueur
Ordre canonique	l'ordre d'apparition dans la grammaire formelle des valeurs

Fonctionnalité	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Support simple	1	12	1	4	3.5	1

Fonctionnalité	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
Support simple	?	?	Oui	4	?	1	?

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Edge Mobile	Firefox pour Android	Opera pour Android	Safari pour iOS	Samsung Internet
Support simple	Support complet 1	Support complet 12	Support complet 1	Support complet 4	Support complet 3.5	Support complet 1	?	?	Support complet Oui	Support complet 4	?	Support complet 1	?

Légende

Support complet: Support complet
Compatibilité inconnue: Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes :

Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, vava, teoli, ksad, FredB, tregagnon, Yuichiro, Mgjbot, Fredchat, Kyodev, VincentN

Dernière mise à jour par : SphinxKnight, 10 févr. 2018 à 00:58:08

Sujets associés