Propriété CSS border-top

La propriété CSS border-top est utilisée pour définir la largeur, le style de ligne et la couleur de la bordure supérieure des éléments. C'est une propriété raccourcie pour la spécification des valeurs des propriétés border-top-width, border-top-style et border-top-color.

Ces trois valeurs de la propriété raccourcie peuvent être spécifiées dans n'importe quel ordre, et certains entre elles peuvent être manquées.

S'il n'y a aucune couleur spécifiée, la valeur sera prise de la propriété color. Si la propriété color n'est pas définie, elle sera noir par défaut.

Si la width n'est pas spécifiée, elle sera un élément de la taille moyenne.

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. La largeur et la couleur de la bordure sont animables.
Version CSS1
Syntaxe DOM object.style.borderTop = "1px solid black";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      border-top: 3px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-top</h2>
    <div> C'est un exemple de la propriété border-top .</div>
  </body>
</html>

La propriété border-top peut être appliquée aux différents éléments.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1, p, div {
      padding: 10px;
      }
      h1 {
      border-top: 5px solid #8ebf42;
      }
      p {
      border-top: 4px dotted #1c87c9;
      }
      div {
      border-top: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>Un titre avec une bordure supérieure verte et solide. </h1>
    <p>Un titre avec une bordure bleue en pointillé (dotted).</p>
    <div>Un élément div avec une double bordure épaise.</div>
  </body>
</html>

Vous pouvez créer une boîte avec un élément <div> et définir une background-color pour votre boîte et définir la bordure supérieure.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border-top: 20px ridge #8ebf42;
      background-color: #ccc;
      height: 100px;
      width: 200px;
      font-weight: bold;
      text-align: center;
      padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Cette boîte a une bordure de crête sur le dessus.</p>
    </div>
  </body>
</html>

Valeurs

Valeur Decription
border-top-width Définit la largeur de la bordure supérieure d'élément. La valeur par défaut est "medium".
Valeur requise.
border-top-style Définit le style de ligne de la bordure supérieure d'élément. La valeur par défaut est "none".
Valeur requise.
border-top-color Définit la couleur de la bordure supérieure d'élément. La valeur par défaut est la couleur actuelle de texte.
initial Définit la valeur par défaut.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

1+ 1+ 3.5+ 1+


Trouvez-vous cela utile?

Articles Associées