border

Exemple interactif

border: solid;

border: dashed red;

border: 1rem solid;

border: thick double #32a1ce;

border: 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-width
• border-style
• border-color

Syntaxe

/* style */
border: solid;

/* largeur | style */
border: 2px dotted;

/* style | couleur */
border: outset #ff3333;

/* largeur | style | couleur */
border: medium dashed green;

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

La propriété border peut être définie en utilisant une, deux ou trois des valeurs listées ci-dessous. L'ordre des valeurs n'a pas d'importance.

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

Description

Comme pour toutes les propriétés raccourcies, toute sous-valeur omise sera définie sur sa valeur initiale. Il est important de noter que border ne permet pas de définir une valeur personnalisée pour border-image, mais la ramène à sa valeur initiale, c'est-à-dire none.

La propriété raccourcie border est particulièrement utile lorsque vous souhaitez que les quatre bordures soient identiques. Pour les différencier, vous pouvez utiliser les propriétés longues border-width, border-style et border-color, qui acceptent des valeurs différentes pour chaque côté. Vous pouvez aussi cibler une bordure à la fois avec les propriétés physiques (par exemple border-top) et logiques (par exemple border-block-start).

Différences entre bordures et contours

Les bordures et les contours sont très similaires. Cependant, les contours diffèrent des bordures de la façon suivante :

• Les contours n'occupent jamais d'espace, car ils sont dessinés à l'extérieur du contenu d'un élément.
• Selon la spécification, les contours n'ont pas à être rectangulaires, même s'ils le sont généralement.

Définition formelle

Syntaxe formelle

border = 
  <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

Définir une bordure rose en relief

HTML

<div>
  J'ai une bordure, un contour et une ombre portée&nbsp;! Incroyable, n'est-ce
  pas&nbsp;?
</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété border-width
• La propriété border-style
• La propriété border-color
• La propriété outline
• Arrière-plans et bordures
• Apprendre CSS : arrière-plans et bordures