CSS border-top-width-Eigenschaft

Die border-top-width-Eigenschaft wird verwendet, um die Breite der oberen Grenze eines Elements festzulegen.

Die Breite der oberen Grenze sowie aller anderen Grenzseiten kann mit den Shorthand-Eigenschaften border oder border-width definiert werden.

Um border-top-width anzuwenden, müssen Sie zuerst einen Grenzstil entweder mit border-style oder border-top-style definieren. Die Eigenschaft wirkt sich nur aus, wenn der Grenzstil nicht none oder hidden ist.

INFO

Die Spezifikation definiert nicht die genaue Dicke jedes Schlüsselworts. Sie haben jedoch immer folgende Reihenfolge: thin ≤ medium ≤ thick.

INFO

Die Spezifikation definiert nicht, wie sich Grenzstile und -breiten in den Ecken verbinden.

Anfangswert	medium
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbbar	Nein
Animierbar	Ja. Die Breite der Grenze ist animierbar.
Version	CSS1
DOM-Syntax	object.style.borderTopWidth = "5px";

Syntax

Syntax der CSS border-top-width-Eigenschaft

css

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

Beispiel für die border-top-width-Eigenschaft:

Beispiel der CSS border-top-width-Eigenschaft mit dem Wert thick

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        border-style: dotted;
        border-top-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-width example</h2>
    <p>As you can see the width of the top border is set to thick.</p>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS border-top-width Property

Beispiel der border-top-width-Eigenschaft mit allen Werten:

Beispiel der CSS border-top-width-Eigenschaft mit den Werten medium, thin, thick, initial und inherit

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-top-width example classes */
      .b1 {
        border-top-width: medium;
      }
      .b2 {
        border-top-width: thin;
      }
      .b3 {
        border-top-width: thick;
      }
      .b4 {
        border-top-width: 10px;
      }
      .b5 {
        border-top-width: initial;
      }
      .b6 {
        border-top-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-top-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
medium	Definiert eine mittlere obere Grenze. Dies ist der Standardwert dieser Eigenschaft.	Testen »
thin	Definiert eine dünne obere Grenze. Die genaue Breite wird vom Benutzeragenten festgelegt.	Testen »
thick	Definiert eine dicke obere Grenze. Die genaue Breite wird vom Benutzeragenten festgelegt.	Testen »
length	Definiert die Längenangabe der Dicke der oberen Grenze (z. B. 10px, 5em, 8pt). Prozentwerte werden nicht unterstützt.	Testen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Testen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

CSS border-top-width-Eigenschaft ​

Syntax ​

Beispiel für die border-top-width-Eigenschaft: ​

Ergebnis ​

Beispiel der border-top-width-Eigenschaft mit allen Werten: ​

Werte ​