Propriété CSS border

La propriété CSS border est une propriété raccourcie qui définit les valeurs des propriétés border-width, border-style et border-color pour tous les côtés d'un élément. Les valeurs négatives ne sont pas autorisées.

La propriété raccourcie border est utilisée quand on veut faire tous les quatres côtés le même. On peut changer les bordures à l'aide des propriétés border-width, border-style, et border-color, qui peuvent définir des valeurs différentes pour chaque côté.

Si la valeur n'est pas définie, les bordures sont invisibles.
Valeur initiale medium none currentColor
Appliquée à Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée Non.
Animable Oui. Largeur, couleur et style de la bordure sont animables.
Version CSS1
Syntaxe DOM object.style.border = "5px solid green";

Syntaxe

border: border-width border-style border-color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      border: thick solid #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété border</h2>
    <p>La bordure de ce paragraphe est définie "thick solid green".</p>
  </body>
</html>

Voyons un autre exemple, où le style de la bordure est de tirets (dashed), la largeur est définie à 3px et la couleur de la bordure est bleu.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      border: 3px dashed #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété border</h2>
    <p>La bordure de ce paragraphe est définie à "3px dashed blue".</p>
  </body>
</html>

Voyons un autre exemple avec la propriété border-color qui a 3 valeurs appliquées. La première est appliquée à la bordure supérieure, la deuxième aux bordures droite et gauche, et la troisième à l'inférieure.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      border: 3px solid;
      border-color: #1c87c9 #666 #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété border</h2>
    <div>Ici 3 valeurs sont appliquées à la propriété border-color.</div>
  </body>
</html>

Un autre exemple avec 3 valeurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p, div {
      padding: 5px;
      }
      .border1 {
      border: 5px solid #ccc;
      }
      .border2 {
      border: 5px dotted #1c87c9;
      }
      div {
      border: thick double #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété border</h2>
    <p class="border1">Un titre avec une bordure verte et solide.</p>
    <p class="border2">Un titre avec une bordure bleu et en pointillé.</p>
    <div>Un élément div avec une double borudre verte.</div>
  </body>
</html>

Valeurs

Valeur Description
border-width Définit la largeur de la bordure. La valeur initiale est "medium".
border-style Définit le style de la bordure. La valeur initiale est "none".
border-color Définit la couleur de la bordure. La valeur initiale est le couleur actuel de l'élément.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées