CSS-Eigenschaft border-width

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>

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>

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.

Browser-Support

1.0+ 1.0+ 1.0+ 3.5+


Finden Sie das nützlich?

Ähnliche Artikel