CSS border-Eigenschaft — Syntax, Werte, Beispiele

Die CSS-Eigenschaft border ist eine Kurzschreibweise, die border-width, border-style und border-color für alle vier Seiten eines Elements in einer einzigen Deklaration setzt. Negative Breitenwerte sind nicht erlaubt.

Diese Seite behandelt die Kurzschreibweisensyntax, die akzeptierten Werte, wie jede Seite unterschiedlich gestaltet werden kann und die verwandten Eigenschaften, die zum Einsatz kommen, wenn die Kurzschreibweise nicht ausreicht.

Verwenden Sie die Kurzschreibweise border, wenn alle vier Seiten denselben Rahmen haben sollen:

/* shorthand — all four sides identical */
border: 2px solid #1c87c9;

/* equivalent longhand */
border-width: 2px;
border-style: solid;
border-color: #1c87c9;

Wenn sich die Seiten unterscheiden sollen, setzen Sie die Langform-Eigenschaften einzeln — jede von ihnen akzeptiert bis zu vier Werte in der Reihenfolge oben–rechts–unten–links. Sie können auch eine einzelne Seite mit border-top, border-right, border-bottom und border-left ansprechen.

Info

Der Wert von border-style ist entscheidend dafür, dass ein Rahmen sichtbar ist. Wenn Sie nur eine Breite und eine Farbe setzen, aber den Stil auf dem Standardwert none belassen, bleibt der Rahmen unsichtbar.

Ausgangswert	medium none currentColor
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Ja. Breite, Farbe und Stil des Rahmens sind animierbar.
Version	CSS1
DOM-Syntax	object.style.border = "5px solid green";

Syntax

Syntax der CSS border-Eigenschaft

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

Beispiel der border-Eigenschaft:

Beispiel der CSS border-Eigenschaft mit dem Wert solid

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        border: thick solid #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p>This paragraph's border is set to "thick solid green".</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Sehen Sie ein weiteres Beispiel, bei dem der Rahmenstil gestrichelt ist, die Breite auf 3px gesetzt ist und die Farbe des Rahmens blau ist.

Beispiel der border-Eigenschaft mit dem Wert "dashed":

Beispiel der CSS border-Eigenschaft mit dem Wert dashed

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px dashed #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <p>This paragraph's border is set to "3px dashed blue".</p>
  </body>
</html>

Probier es selbst »

Die Kurzschreibweise border zeichnet stets alle vier Seiten gleich. Um eine Seite zu variieren, überschreiben Sie eine der Langform-Eigenschaften danach. Im nächsten Beispiel nimmt eine einzelne border-color-Deklaration drei Werte an: Der erste gilt für oben, der zweite für rechts und links, und der dritte für unten. Der erste wird auf den oberen Rahmen angewendet, der zweite auf rechts und links, und der dritte auf den unteren.

Beispiel der border-Eigenschaft mit 3 border-color-Werten:

Beispiel der CSS border-color-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 3px solid;
        border-color: #1c87c9 #666 #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Border property example</h2>
    <div>Here 3 values are applied to the border-color property.</div>
  </body>
</html>

Probier es selbst »

Beispiel der border-style-Eigenschaft:

Beispiel der CSS border-Eigenschaft mit den Werten solid, dotted und double

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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>Border property example</h2>
    <p class="border1">A heading with a solid gray border.</p>
    <p class="border2">A heading with a dotted blue border.</p>
    <div>A div element with a thick double green border.</div>
  </body>
</html>

Probier es selbst »

Abgerundete Ecken und verwandte Eigenschaften

Die Kurzschreibweise border steuert den Eckenradius nicht. Um Ecken abzurunden, fügen Sie die separate Eigenschaft border-radius hinzu:

p {
  border: 3px solid #1c87c9;
  border-radius: 8px;
}

Einige verwandte Eigenschaften sind es wert, bekannt zu sein:

border-radius — rundet die Ecken ab.
outline — zeichnet eine Linie außerhalb des Rahmens, die keinen Layoutraum einnimmt.
border-collapse — führt benachbarte Zellrahmen in Tabellen zu einer einzigen Linie zusammen.

Werte

Die Kurzschreibweise akzeptiert die drei Rahmen-Langform-Eigenschaften in beliebiger Reihenfolge sowie die globalen Schlüsselwörter.

Wert	Beschreibung
border-width	Legt die Breite des Rahmens fest. Standardwert ist "medium".
border-style	Legt den Stil des Rahmens fest. Standardwert ist "none".
border-color	Legt die Farbe des Rahmens fest. Standardwert ist die aktuelle Farbe des Elements.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Welche der folgenden Werte sind gültige border-Stile in CSS?