CSS-Eigenschaft border

Die CSS-Eigenschaft border ist eine Shorthand-Eigenschaft, die die Werte border-width, border-style und border-color für alle vier Seiten eines Elements einstellt. Negative Werte sind nicht erlaubt.

Die Shorthand-Eigenschaft border wird verwendet, wenn Sie alle vier Seiten gleich machen mächten. Sie können die Grenzen mithilfe der Eigenschaftenborder-width, border-style und border-color ändern. Sie können auch jede Seite mit unterschiedlichen Werten einstellen.

Wenn der Wert nicht definiert ist, sind die Grenzen unsichtbar.
Anfangswert medium none currentColor
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja. Breite, Farbe und Stil des Borders sind animierbar.
Version CSS1
DOM Syntax object.style.border = "5px solid green";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      border: thick solid #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft border</h2>
    <p>Der Rand dieses Absatzes ist auf "thick solid green" gesetzt.</p>
  </body>
</html>

Sehen Sie ein weiteres Beispiel, wo der Stil des Rahmens gestrichelt, die Breite auf 3px eingestellt und die Farbe des Rahmens blau ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      border: 3px dashed #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft border</h2>
    <p>Der Rand dieses Absatzes ist auf "3px dashed blue" gesetzt.</p>
  </body>
</html>

Betrachten wir ein anderes Beispiel mit der Eigenschaft border-color, wo 3 Werte angewendet werden. Der erste wird auf den oberen Rand aufgebracht, der zweite auf rechts und links und der dritte auf den unteren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      border: 3px solid;
      border-color: #1c87c9 #666 #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft border</h2>
    <div>Hier werden 3 Werte auf die Eigenschaft border-color angewendet.</div>
  </body>
</html>

Ein weiteres Beispiel, wo drei Eigenschaften angewendet werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für die Eigenschaft border</h2>
    <p class="border1">Eine Überschrift mit einem durchgehend grauen Rand.</p>
    <p class="border2">Eine Überschrift mit einem gestrichelten blauen Rand.</p>
    <div>Ein div-Element mit einem dicken, doppelten grünen Rand.</div>
  </body>
</html>

Werte

Wert Beschreibung
border-width Es definiert die Breite des Rahmens. Der Standardwert ist "medium".
border-style Es definiert den Stil des Rahmens. Der Standardwert ist "none".
border-color Es definiert die Farbe des Rahmens. Der Standardwert ist die aktuelle Farbe des Elements.
initial Es setzt die Eigenschaft auf den 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