CSS-Eigenschaft border-width

❮ Vorige Nächste ❯

Die CSS-Eigenschaft border-width stellt die Breiten aller vier Seiten des Randes eines Elements ein. Diese Eigenschaft hat vier Werte. Wenn Sie einen Wert verwenden, gilt der Wert für die Randenbreite für alle vier Seiten des Elements (d. h. oben, rechts, unten, links). Es handelt sich um eine Shorthand-Eigenschaft, die border-top-width, border-left-width, border-right-width, border-bottom-width.

Wenn Sie zwei Werte verwenden, gilt der erste Wert für die Ober- und Unterseite des Elements. Der zweite Wert gilt für die linke und rechte Seite des Elements. Wenn drei Werte verwendet werden, gilt der erste Wert für die Oberseite des Elements. Der zweite Wert gilt für die rechte und linke Seite des Elements. Der dritte Wert gilt für die Unterseite des Elements.

Wenn vier Werte verwendet werden, gilt der erste Wert für die Oberseite des Elements. Der zweite Wert gilt für die rechte Seite des Elements. Der dritte Wert gilt für die Unterseite des Elements. Der vierte Wert gilt für die linke Seite des Elements.

Zuerst sollen Sie die Eigenschaft border-style dann die Eigenschaft border-width. Ein Element muss Ränder haben, bevor Sie die Breite einstellen können.

Anfangswert	medium
Geerbt	Nein
Animierbar	Ja, die Breite des Rahmens ist animierbar.
Version	CSS1
JavaScript Syntax	object.style.borderWidth = "1px 5px";

Syntax

border-width: medium | thin | thick | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      border-style: solid;
      border-width: 1px;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Der Rand dieses Absatzes wird als 1px ausgewählt.</p>
  </body>
</html>

Versuch es selber!

Lassen Sie uns das zweite Beispiel, das drei Werte enthält, sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      color: #666;
      padding: 5px;      
      border-style: solid; 
      } 
      .thin {
      border-width: 1px;
      }
      .medium{
      border-width: medium;
      }
      .thick {
      border-width: 10px;
      }
    </style>
  </head>
  <body>
    <p class="thin">Der Rand dieses Absatzes wird als 1px. ausgewählt.</p>
    <p class="medium">Der Rand dieses Absatzes wird als medium ausgewählt.</p>
    <p class="thick">Der Rand dieses Absatzes wird als 10px ausgewählt.</p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
medium	Es definiert einen mittleren Rand. Das ist der Standardwert.
thin	Es definiert einen dünnen Rand.
thick	Es definiert einen dicken Rand.
length	Es definiert die Dicke der Umrandung.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.