Propriété CSS 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

Sous-propriétés qui sont uniquement réinitialisées

Cette propriété réinitialise les propriétés CSS suivantes à leurs valeurs initiales :

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

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;

Valeurs

Cette propriété est définie comme une liste séparée par des espaces d'une à trois des valeurs suivantes :

<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 est utilisée est 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

La propriété raccourcie border définit la largeur, le style et la couleur des quatre côtés de la bordure d'un élément. Elle se définit à l'aide d'une, de deux ou des trois valeurs des propriétés constitutives, dans n'importe quel ordre.

Les sous-valeurs omises prennent leur valeur initiale. Pour afficher une bordure, vous définissez la composante <line-style>, car le style prend par défaut la valeur none.

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,∞]>  |
  hairline        |
  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