border-bottom

Exemple interactif

border-bottom: solid;

border-bottom: dashed red;

border-bottom: 1rem solid;

border-bottom: thick double #32a1ce;

border-bottom: 4mm ridge rgb(211 220 50 / 0.6);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec une bordure autour.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• border-bottom-color
• border-bottom-style
• border-bottom-width

Syntaxe

border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

/* Valeurs globales */
border-bottom: inherit;
border-bottom: initial;
border-bottom: revert;
border-bottom: revert-layer;
border-bottom: unset;

Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.

Valeurs

<br-width>

Voir border-bottom-width.

<br-style>

Voir border-bottom-style.

<color>

Voir border-bottom-color.

Description

Comme pour toutes les propriétés raccourcies, border-bottom définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si elles ne sont pas indiquées. Les valeurs non indiquées prennent leur valeur par défaut. Considérez le code suivant :

border-bottom-style: dotted;
border-bottom: thick green;

Il est en réalité équivalent à celui-ci :

border-bottom-style: dotted;
border-bottom: none thick green;

La valeur de border-bottom-style fournie avant border-bottom est ignorée. Comme la valeur par défaut de border-bottom-style est none, ne pas définir la partie border-style donne pour résultat aucune bordure.

Définition formelle

Syntaxe formelle

border-bottom = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

Exemples

Appliquer une bordure inférieure

HTML

<div>Cette boîte a une bordure sur le côté inférieur.</div>

CSS

div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété border
• La propriété border-block
• La propriété outline