Rahmen

Im Modul zum Boxmodell haben wir eine Frame-Analogie verwendet, um die einzelnen Bereiche des Boxmodells zu beschreiben.

Drei Bilderrahmen nebeneinander.
Im mittleren Frame sind die Bereiche des Boxmodells zu sehen.

Der Rahmen ist der Rahmen Ihrer Felder. Mit den border-Eigenschaften haben Sie eine große Auswahl an Optionen, um diesen Rahmen in nahezu jedem Stil zu erstellen.

Rahmeneigenschaften

Mit den einzelnen border-Eigenschaften können Sie die verschiedenen Teile eines Rahmens stylen.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Stil

Damit ein Rahmen angezeigt wird, müssen Sie border-style definieren. Es gibt mehrere Möglichkeiten:

Bei den Stilen ridge, inset, outset und groove verdunkelt der Browser die Rahmenfarbe für die zweite angezeigte Farbe, um Kontrast und Tiefe zu schaffen. Dieses Verhalten kann je nach Browser variieren, insbesondere bei dunklen Farben wie black. In Chrome werden diese Rahmenstile als durchgehend angezeigt, in Firefox werden sie aufgehellt, um dann eine dunklere zweite Farbe zu erhalten.

Das Browserverhalten kann auch bei anderen Rahmenstilen variieren. Daher ist es wichtig, Ihre Website in verschiedenen Browsern zu testen. Ein häufiges Beispiel für diesen Unterschied ist die Darstellung der Stile dotted und dashed in verschiedenen Browsern.

Die Demo für Rahmen in Chrome, Firefox und Safari, die die subtilen Unterschiede bei der Darstellung von Rahmen zeigt
Rahmen in Chrome, Firefox und Safari

Mit border-top-style, border-right-style, border-left-style und border-bottom-style können Sie den Rahmenstil für jede Seite des Felds festlegen.

Kurzschreibweise

Wie bei margin und padding können Sie mit der Kurzschreibweise border alle Teile des Rahmens in einer Deklaration definieren.

.my-element {
    border: 1px solid red;
}

Die Werte in der Kurzform border werden in der Reihenfolge border-width, border-style und dann border-color angeordnet.

Farbe

Mit border-color können Sie die Farbe für alle Seiten des Felds oder für jede Seite einzeln festlegen. Standardmäßig wird die aktuelle Textfarbe des Felds verwendet: currentColor. Wenn Sie also nur Rahmeneigenschaften wie die Breite angeben, wird die Farbe zu diesem berechneten Wert, sofern Sie sie nicht explizit festlegen.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Wenn Sie für jede Seite des Felds eine Rahmenfarbe festlegen möchten, verwenden Sie border-top-color, border-right-color, border-left-color und border-bottom-color.

Breite

Die Breite eines Rahmens gibt die Dicke der Linie an und wird durch border-width gesteuert. Die Standardrandbreite ist medium. Dieser ist jedoch nur sichtbar, wenn Sie einen Stil definieren. Sie können auch andere benannte Breiten wie thin und thick verwenden.

Für die border-width-Properties ist auch eine Längeneinheit wie px, em, rem oder % zulässig. Verwenden Sie border-top-width, border-right-width, border-left-width und border-bottom-width, um die Rahmenbreite für jede Seite des Felds festzulegen.

Logische Properties

Im Modul Logische Eigenschaften haben Sie gelernt, wie Sie sich auf Blockfluss und Inline-Fluss beziehen, anstatt auf die expliziten Seiten oben, rechts, unten oder links.

Diese Funktion ist auch für Rahmen verfügbar:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

In diesem Beispiel haben alle Seiten von .my-element einen gepunkteten Rahmen 2px, der der aktuellen Textfarbe entspricht. Der Rahmen von inline-end wird dann als 2px, durchgehend und rot definiert. In linksläufigen Sprachen wie Deutsch befindet sich der rote Rahmen also rechts im Feld. Bei rechtsläufigen Sprachen wie Arabisch befindet sich der rote Rahmen links im Feld.

Die Browserunterstützung für logische Eigenschaften in Rahmen ist unterschiedlich. Informieren Sie sich daher vor der Verwendung über die Unterstützung.

Rahmenradius

Verwenden Sie das Attribut border-radius, um einem Feld abgerundete Ecken zu geben.

.my-element {
    border-radius: 1em;
}

Mit dieser Kurzschreibweise wird jeder Ecke des Felds ein einheitlicher Rahmen hinzugefügt. Wie bei den anderen Rahmeneigenschaften können Sie den Rahmenradius für jede Seite mit border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius definieren.

Sie können den Radius jeder Ecke auch in der Kurzschreibweise angeben, die der Reihenfolge oben links, oben rechts, rechts unten und links unten folgt.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Wenn Sie einen einzelnen Wert für eine Ecke definieren, verwenden Sie eine weitere Kurzschreibweise, da ein Rahmenradius in zwei Teile unterteilt ist: die vertikale und die horizontale Seite. Wenn Sie also border-top-left-radius: 1em festlegen, legen Sie den Radius für die obere linke Oberseite und die obere linke Linke fest.

Sie können beide Properties pro Ecke so definieren:

.my-element {
    border-top-left-radius: 1em 2em;
}

Dadurch wird der Wert border-top-left-top = 1em und der Wert border-top-left-left = 2em hinzugefügt. Dadurch wird der Radius des oberen linken Rahmens in einen elliptischen Radius umgewandelt, anstatt den standardmäßigen kreisförmigen Radius zu verwenden.

Sie können diese Werte im border-radius-Kurzzeichen definieren. Verwenden Sie dazu nach den Standardwerten ein /, um die elliptischen Werte zu definieren. So können Sie kreativ werden und komplexe Formen erstellen.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Rahmenbilder

Sie müssen in CSS nicht nur einen stroke-basierten Rahmen verwenden. Sie können auch jeden beliebigen Bildtyp mit border-image verwenden. Mit dieser Kurzschreibweise können Sie das Quellbild, die Art und Weise, wie es in Scheiben geschnitten wird, die Bildbreite, den Abstand des Rahmens vom Rand und die Wiederholung festlegen.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

Die Eigenschaft border-image-width ist mit border-width vergleichbar: Mit ihr legen Sie die Breite des Rahmenbilds fest. Mit der Eigenschaft border-image-outset können Sie den Abstand zwischen dem Rahmenbild und dem Frame festlegen, um den es gewickelt wird.

border-image-source

Das border-image-source (Quelle des Rahmenbilds) kann ein url für ein beliebiges gültiges Bild sein, einschließlich CSS-Gradienten.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

Mit der Property border-image-slice können Sie ein Bild in 9 Teile mit 4 Teilungslinien aufteilen. Er funktioniert ähnlich wie die Kurzschreibweise margin, bei der Sie den Offset-Wert für oben, rechts, unten und links definieren.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Das in der Demo verwendete Bild mit den vier Scheiben, die mit blauen Linien dargestellt sind

Nachdem Sie die Offset-Werte definiert haben, haben Sie jetzt 9 Abschnitte des Bildes: 4 Ecken, 4 Kanten und einen Mittelabschnitt. Die Ecken werden mit dem Rahmenbild auf die Ecken des Elements angewendet. Die Ränder werden auf die Ränder dieses Elements angewendet. Mit der Eigenschaft border-image-repeat wird festgelegt, wie diese Kanten ihren Raum ausfüllen, und mit der Eigenschaft border-image-width wird die Größe der Scheiben gesteuert.

Das Keyword fill gibt an, ob der mittlere Abschnitt, der durch das Slicing übrig bleibt, als Hintergrundbild des Elements verwendet wird oder nicht.

border-image-repeat

Mit border-image-repeat wird festgelegt, wie das Rahmenbild wiederholt werden soll. Die Funktionsweise entspricht der von background-repeat.

  • Der Standardwert ist stretch. Das Quellbild wird so gestreckt, dass es nach Möglichkeit den verfügbaren Bereich ausfüllt.
  • Mit dem Wert repeat werden die Ränder des Quellbilds so oft wie möglich gekachtelt. Dabei werden die Randbereiche möglicherweise zugeschnitten.
  • Der Wert round entspricht dem Wert „repeat“. Anstatt die Bildränder zuzuschneiden, um so viele Bilder wie möglich zu zeigen, wird das Bild gestreckt und wiederholt, um eine nahtlose Wiederholung zu erzielen.
  • Der Wert space entspricht wieder dem Wert für „repeat“, fügt aber einen Abstand zwischen den einzelnen Randbereichen ein, um ein nahtloses Muster zu erstellen.

Wissen testen

Ihr Wissen über Rahmen testen

Welche ist die Standardrahmenfarbe?

white
black
historicColor
currentColor
.my-element {
  border: solid hotpink;
}

Wie breit ist der Standardrand?

solid
1px
medium

border-inline: 1px solid würde…

setzen Sie Rahmen an der Innenseite.
setzen Sie Rahmen um die erste Zeile.
oben und unten Rahmen hinzufügen (in lateinischen Layouts).
(bei lateinischen Layouts) links und rechts Rahmen setzen.