W3docs
de
Anmelden

CSS Border

CSS-Rahmen: Breite, Farbe und Stile wie dotted, dashed, solid, double, groove, ridge, inset, outset mit Beispielen.

CSS Border

Ein Rahmen ist eine Linie, die um die Kanten des Elementrahmens gezeichnet wird, zwischen dem Innenabstand (Padding) und dem Außenabstand (Margin). Rahmen gehören zu den häufigsten Mitteln, um Inhalte visuell zu trennen, eine Box hervorzuheben oder UI-Elemente wie Karten, Schaltflächen und Eingabefelder zu gestalten.

Jeder Rahmen besteht aus drei Bestandteilen, die man fast immer alle drei festlegt:

  • width — die Dicke der Linie (z. B. 2px, thin, thick).
  • style — das Aussehen der Linie (z. B. solid, dashed, dotted). Dies ist die einzige Eigenschaft, die zwingend angegeben werden muss — ohne border-style zeigt der Browser keinen Rahmen, auch wenn Breite und Farbe gesetzt sind.
  • color — die Farbe der Linie (z. B. red, #1c87c9, rgb(0,0,0)).

Diese Werte können einzeln mit border-width, border-style und border-color gesetzt werden oder alle auf einmal mit der Kurzschreibweise border. Der Rest dieses Kapitels erklärt jede Option im Detail.

Beispiel der border-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Example with a yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

Drei Absätze mit blauem gepunktetem, gelbem gestricheltem und grünem durchgezogenem CSS-Rahmen

Border Width

Die Eigenschaft border-width legt die Breite eines Rahmens fest.

Die Breite kann in einer Längeneinheit wie Pixel (px), em oder rem angegeben werden. Alternativ kann einer der drei vordefinierten Schlüsselwörter verwendet werden: thin, medium oder thick. Die genaue Größe dieser Schlüsselwörter liegt im Ermessen des Browsers, jedoch gilt: thin < medium < thick.

border-width kann nicht allein verwendet werden — ohne border-style hat es keine sichtbare Wirkung, da der Standardstil none ist. Setzen Sie immer zuerst den Stil (oder verwenden Sie die Kurzschreibweise border).

border-width kann auch bis zu vier Werte erhalten, um jede Seite unabhängig voneinander zu dimensionieren, genau wie border-style: Ein Wert setzt alle Seiten, zwei Werte setzen oben/unten und links/rechts, vier Werte setzen oben, rechts, unten und links im Uhrzeigersinn.

Beispiel der border-width-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-width-1 {
        border-style: solid;
        border-width: 6px;
      }
      p.border-width-2 {
        border-style: dotted;
        border-width: 1px;
      }
        p.border-width-3 {
        border-style: dotted;
        border-width: medium;
      }
      p.border-width-4 {
        border-style: double;
        border-width: 8px;
      }
      p.border-width-5 {
        border-style: double;
        border-width: thick;
      }
      p.border-width-6 {
        border-style: solid;
        border-width: 3px 12px 6px 18px;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p class="border-width-1">Example with border-width.</p>
    <p class="border-width-2">Example with border-width.</p>
    <p class="border-width-3">Example with border-width.</p>
    <p class="border-width-4">Example with border-width.</p>
    <p class="border-width-5">Example with border-width.</p>
    <p class="border-width-6">Example with border-width.</p>
  </body>
</html>
Probier es selbst »

Border Color

Die Eigenschaft border-color wird verwendet, um die Farbe eines Rahmens festzulegen. Die Farbe kann angegeben werden durch:

  • Name — gibt einen Farbnamen an, z. B. "red"
  • RGB — gibt einen RGB-Wert an, z. B. "rgb(255,0,0)"
  • Hex — gibt einen Hexadezimalwert an, z. B. "#ff0000"

Die Eigenschaft border-color kann nicht allein verwendet werden. Sie hat keine Wirkung. Verwenden Sie zuerst border-style, um den Rahmen festzulegen.

Üblicherweise werden diese drei Eigenschaften in einer Zeile zusammen geschrieben.

Beispiel der border-color-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.color-one {
        border-style: solid;
        border-color: blue;
      }
      p.color-two {
        border-style: dotted;
        border-color: yellow;
      } 
      p.color-three {
        border-style: solid;
        border-color: DarkBlue orange green red;
      } 
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p class="color-one">Example with blue solid border-color.</p>
    <p class="color-two">Example with yellow dotted border-color.</p>
    <p class="color-three">Example with multicolor border-color.</p>
  </body>
</html>
Probier es selbst »

Beachten Sie den letzten Absatz: Wenn border-color vier Werte erhält, werden diese in der Reihenfolge oben, rechts, unten und links im Uhrzeigersinn angewendet.

Border Style

Die CSS-Eigenschaft border-style legt den Stil aller vier Seiten der Rahmen eines Elements fest. Rahmen werden auf dem Hintergrund eines Elements platziert. Sie kann einen bis vier Werte haben, sodass jede Seite einen eigenen Wert haben kann. Der Standardwert von border-style ist none.

border-style hat folgende Werte:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Die Bedeutung der einzelnen Werte:

  • dotted — eine Reihe runder Punkte.
  • dashed — eine Reihe kurzer Striche.
  • solid — eine einzelne gerade Linie. Dies ist bei weitem der häufigste Stil.
  • double — zwei parallele durchgezogene Linien. Die kombinierte Breite entspricht dem Wert von border-width.
  • groove — sieht aus, als ob der Rahmen in die Seite eingraviert wäre (3D-Effekt).
  • ridge — das Gegenteil von groove; der Rahmen scheint hervorzustehen.
  • inset — lässt die gesamte Box so aussehen, als wäre sie in die Seite gedrückt.
  • outset — lässt die Box so aussehen, als würde sie aus der Seite herausragen.

Die Effekte groove, ridge, inset und outset hängen von der Rahmenfarbe ab und wirken daher dezent (oder unsichtbar) bei einem dünnen Rahmen oder auf einem ähnlichen Hintergrund. Verwenden Sie eine border-width von mindestens 3px, um sie deutlich zu sehen.

CSS Border für einzelne Seiten

CSS bietet Eigenschaften, die jeden Rahmen (rechts, links, unten und oben) einzeln festlegen.

Die Eigenschaft border-style kann 4 Werte haben, zum Beispiel border-style: dotted solid double dashed; — dabei ist der obere Rahmen gepunktet, der untere doppelt, der rechte durchgezogen und der linke gestrichelt.

Die Eigenschaft border-style kann 3 Werte haben, zum Beispiel border-style: dotted solid double; — dabei ist der obere Rahmen gepunktet, der untere doppelt, und der rechte und linke Rahmen sind durchgezogen.

Die Eigenschaft border-style kann 2 Werte haben, zum Beispiel border-style: dotted solid; — dabei sind der rechte und linke Rahmen durchgezogen und der obere und untere Rahmen gepunktet. Und natürlich kann diese Eigenschaft auch nur 1 Wert haben, zum Beispiel border-style: solid; — dabei sind alle Seiten durchgezogen.

Beispiel der border-Eigenschaften für einzelne Seiten:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top-style: double;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: groove;
      }
    </style>
  </head>
  <body>
    <p>Example with border individual sides.</p>
  </body>
</html>
Probier es selbst »

CSS border als Kurzschreibweise

Die CSS-Eigenschaft border ist eine Kurzschreibweise für die folgenden einzelnen Rahmen-Eigenschaften:

  • Die CSS-Eigenschaft border-width, die die Breite aller vier Seiten des Rahmens eines Elements festlegt.
  • Die CSS-Eigenschaft border-style, die den Stil aller vier Seiten der Rahmen eines Elements festlegt.
  • Die CSS-Eigenschaft border-color, die die Farbe aller vier Seiten des Rahmens eines Elements festlegt.

Beispiel der border-Kurzschreibweise:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-all {
        border: 3px solid red;
      }
      p.border-left {
        border-left: 4px solid blue;
        background-color: #dcdcdc;
      }
      p.border-top {
        border-top: 6px solid green;
        background-color: #dcdcdc;
      }
    </style>
  </head>
  <body>
    <h2>The border Shorthand Property</h2>
    <p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
    <p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
    <p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
  </body>
</html>
Probier es selbst »

Abgerundete Rahmen

Mit der CSS-Eigenschaft border-radius können abgerundete Rahmen zu einem Element hinzugefügt werden.

Beispiel der border-radius-Eigenschaft:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 3px solid blue;
      }
      p.round-one {
        border: 3px solid blue;
        border-radius: 6px;
      }
      p.round-two {
        border: 3px solid blue;
        border-radius: 9px;
      }
      p.round-three {
        border: 3px solid blue;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p class="normal">Example with normal border</p>
    <p class="round-one">Example with round border</p>
    <p class="round-two">Example with rounder border</p>
    <p class="round-three">Example with roundest border</p>
  </body>
</html>
Probier es selbst »

Der Unterschied zwischen Rahmen und Umrissen

Ein Rahmen und ein Umriss zeichnen beide eine Linie um ein Element, weshalb sie leicht verwechselt werden. Die wesentlichen Unterschiede sind:

  • Ein Rahmen ist Teil des Box-Modells. Er befindet sich zwischen dem Padding und dem Margin und nimmt Platz ein, sodass das Hinzufügen eines Rahmens das Layout umgebender Elemente verschieben kann.
  • Ein Umriss wird außerhalb des Rahmens gezeichnet und nimmt keinen Platz ein, sodass er niemals die Größe oder Position des Elements oder seiner Nachbarn verändert.
  • Ein Rahmen kann auf jeder Seite einen anderen Stil, eine andere Breite und eine andere Farbe haben. Ein Umriss ist auf allen vier Seiten identisch.
  • Ein Umriss kann mit outline-offset vom Element versetzt werden; Rahmen können nicht versetzt werden.

Da Umrisse das Layout nicht beeinflussen, werden sie häufig für den :focus-Zustand von Schaltflächen und Links verwendet — der Fokusring kann erscheinen, ohne den Rest der Seite zu verschieben.

Verwandte Kapitel

Übungen

Übung
Welche der folgenden Eigenschaften können verwendet werden, um Rahmen in CSS zu gestalten?
Welche der folgenden Eigenschaften können verwendet werden, um Rahmen in CSS zu gestalten?
Was this page helpful?