CSS-Border: So erstellen und gestalten Sie Rahmen in CSS

Rahmen sind ein wichtiges Element im Webdesign. Sie können verwendet werden, um Content auf einer Webseite abzugrenzen oder auf ihn aufmerksam zu machen. Das optische Hervorheben sorgt mit einer besseren Strukturierung dabei nicht nur für ein besseres Verständnis der präsentierten Inhalte, sondern führt dazu, dass Besuchende einfacher zum Ausführen bestimmter Aktionen bewegt werden.

Das Studio für audiovisuelle Inhalte Ende verwendet beispielsweise eine Umrandung und einen „box-shadow“-Effekt, um die CTA-Schaltfläche hervorzuheben, die Besucherinnen und Besucher dazu ermutigt, sich den Reel anzusehen.

Damit Sie dieses Element effektiv in Ihrem Webdesign verwenden können, werden wir in diesem Beitrag alles, was Sie über die CSS-Rahmeneigenschaften wissen müssen, behandeln, einschließlich:

• Definition der Eigenschaft „border-style“ (Rahmentyp)
• Definition der Eigenschaft „border-width“ (Rahmenbreite)
• Definition der Eigenschaft „border-color“ (Rahmenfarbe)
• Definition der „border“ Shorthand-Eigenschaft
• Warum wird der Rahmen nicht angezeig?
• Definition des Rahmen-Randabstands („border-padding“)
• Hinzufügen eines Rahmenschattens („border-shadow“)
• Erstellen eines Bildes als Rahmen („border-image“)
• Erstellen eines Rahmens mit Farbverlauf („border-gradient“)
• Erstellen eines Rahmens mit abgerundeten Ecken („border-radius“)
• Entfernen des Rahmenzwischenraums in einem Tabellenelement („border-collapse“)

CSS-Eigenschaft „border-style“ (Rahmentyp)

Die CSS-Eigenschaft „border-style“ gibt an, welche Art von Rahmen angezeigt werden soll. Es gibt zehn mögliche Werte, die Sie verwenden können, um die Eigenschaft „border-style“ festzulegen. Werfen wir einen kurzen Blick auf diese:

• none: kein Rahmen
• solid: durchgezogener Rahmen
• dashed: gestrichelter Rahmen
• dotted: gepunkteter Rahmen
• double: doppelter Rahmen
• groove: Rahmen mit 3D-Effekt
• ridge: Rahmen mit 3D-Effekt
• inset: Rahmen mit 3D-Effekt; das Element erscheint eingebettet
• outset: Rahmen mit 3D-Effekt; das Element erscheint geprägt
• hidden: unsichtbarer Rahmen

Der Effekt der Werte „groove“, „ridge“, „inset“ und „outset“ hängt von dem Wert ab, der für die Eigenschaft „border-color“ festgelegt wurde. Wenn kein Wert für „border-color“ angegeben wird, dann ist schwarz der Standardwert (default).

Die Eigenschaft „border-style“ kann zwischen einem und vier Werten haben.

Wenn nur ein Wert definiert wird, dann gilt er für alle Seiten des Elements. Wenn zwei Werte definiert werden, dann repräsentiert der erste Wert den oberen und unteren Rand und der zweite den rechten und linken Rand. Werden drei Werte definiert, dann steht der erste Wert für den oberen Rand, der zweite für den linken und rechten und der vierte für den unteren Rand. Werden vier Werte definiert, dann stehen sie jeweils für den oberen, rechten, unteren und linken Rand.

Sehen wir uns nun Beispiele für all diese Werte an.

Siehe das Pen-Beispiel zYZyMmx von Christina Perricone (@hubspot) auf CodePen.

CSS-Eigenschaft „border-width“ (Rahmenbreite)

Die CSS-Eigenschaft „border-width“ legt die Breite des Rahmens fest. Sie können diese Eigenschaft mit vordefinierten Werten oder Längenwerten festlegen. Werfen wir einen kurzen Blick darauf:

• Vordefinierte Werte: thin, medium, thick
• Längenwerte: px, pt, em, rem, vh und mehr

Wie die Eigenschaft „border-style“ kann auch die Eigenschaft „border-width“ zwischen einem und vier Werten haben.

Wenn nur ein Wert definiert wird, dann gilt er für alle Seiten des Elements. Werden zwei Werte definiert, steht der erste Wert für die obere und untere Randbreite und der zweite für die rechte und linke Randbreite. Wenn drei Werte definiert werden, steht der erste Wert für die obere Randbreite, der zweite für die linke und rechte und der vierte für die untere Breite. Werden vier Werte definiert, dann stehen sie jeweils für die obere, rechte, untere und linke Randbreite.

Sehen wir uns im Folgenden Beispiele an, die durch verschiedene Werte für die Rahmenbreite definiert sind.

Siehe das Pen-Beispiel CSS Border Width von Christina Perricone (@hubspot) auf CodePen.

CSS-Eigenschaft „border-color“ (Rahmenfarbe)

Die CSS-Eigenschaft „border-color“ legt die Farbe des Rahmens fest. Sie können diese Eigenschaft mit Farbnamen, Hex-Farbcodes, RGB- oder RGBA-Werten sowie HSL- oder HSLA-Werten festlegen.

Wie die Eigenschaft „border-style“ und die Eigenschaft „border-width“ kann auch die Eigenschaft „border-color“ zwischen einem und vier Werten haben.

Wenn nur ein Wert definiert wird, dann gilt er für alle Seiten des Elements. Wenn zwei Werte definiert werden, dann steht der erste Wert für die obere und untere Randfarbe und der zweite für die rechte und linke Randfarbe. Wenn drei Werte definiert werden, dann steht der erste Wert für die obere Randfarbe, der zweite für die linke und rechte und der vierte für die untere Farbe. Werden vier Werte definiert, dann stehen sie jeweils für die obere, rechte, untere und linke Randfarbe.

Sehen wir uns im Folgenden Beispiele an, die durch verschiedene „border color“-Werte definiert sind.

Siehe das Pen-Beispiel CSS Border Color von Christina Perricone (@hubspot) auf CodePen.

CSS-Kurzschreibweise beim Befehl „border“

CSS-Kurzschreibweisen ermöglichen es, die Werte mehrerer Eigenschaften gleichzeitig zu setzen. Diese Werte werden durch Leerzeichen getrennt.

Die „border“-Eigenschaft zum Beispiel dient als Kurzschreibweise für die einzelnen „border“-Eigenschaften oben: „border-width“, „border-style“ und „border-color“.

So könnte man die folgenden Deklarationen ausschreiben:

 

border-width: 5px;
border-style: solid;
border-color: #00A4BD;

Oder man könnte dieselbe Deklaration mit dem „border“-Befehl als Kurzschreibweise angeben:

 

border: 5px solid #00A4BD;

Während diese Kurzschreibweise Zeit spart und Ihren Code sauberer aussehen lassen kann, bietet sie auch Raum für Fehler. Lassen Sie uns im folgenden Abschnitt einen Blick auf ein häufiges Problem werfen, auf das Sie bei der Verwendung dieser Eigenschaft stoßen können.

CSS-Border wird nicht angezeigt

Wenn Sie die Eigenschaft „border“ in CSS gesetzt haben und der Rahmen nicht angezeigt wird, liegt das wahrscheinlich daran, dass Sie die Rahmenart nicht definiert haben. Während die Werte der Eigenschaften „border-width“ und „border-color“ weggelassen werden können, muss die Eigenschaft „border-style“ definiert werden, sonst wird sie nicht gerendert.

Wenn die Werte für die Eigenschaften „border-width“ und „border-color“ weggelassen werden, wird die Umrandungslinie standardmäßig schwarz und etwa 3px breit dargestellt.

Hier ist ein Beispiel für einen Rahmen, der angezeigt wird, weil er korrekt kodiert wurde, und ein Beispiel für einen Rahmen, der nicht angezeigt wird, weil er falsch kodiert wurde.

Siehe das Pen-Beispiel CSS Border Not Showing von Christina Perricone (@hubspot) auf CodePen.

CSS-Eigenschaft „border-padding“

Die CSS-Eigenschaft „padding“ schafft Platz zwischen dem Inhalt eines Elements und dem Rand eines Elements. Wenn die Eigenschaft „padding“ nicht definiert ist, dann gibt es keinen Abstand zwischen dem Inhalt und dem Rand.

Um Platz hinzuzufügen, können Sie die „padding“-Eigenschaft mit Längen- oder Prozentwerten festlegen. Die Werte müssen positiv sein. Negative Werte werden nicht dargestellt.

Wie die obigen Eigenschaften kann auch die Eigenschaft „padding“ zwischen einem und vier Werten haben.

Wenn nur ein Wert definiert wird, dann gilt er für alle Seiten des Elements. Werden zwei Werte definiert, dann steht der erste Wert für den oberen und unteren Innenabstand und der zweite für den rechten und linken Innenabstand. Werden drei Werte definiert, dann steht der erste Wert für den oberen Innenabstand, der zweite für den linken und rechten und der vierte für den unteren Innenabstand. Werden vier Werte definiert, dann stehen sie jeweils für den oberen, rechten, unteren und linken Abstand.

Sehen wir uns im Folgenden Beispiele an, die durch verschiedene „padding“-Werte definiert sind.

Siehe das Pen-Beispiel jOBXXRW von Christina Perricone (@hubspot) auf CodePen.

CSS-Eigenschaft „box-shadow“ (Schatteneffekt)

Die CSS-Eigenschaft „box-shadow“ kann in Kombination mit der Eigenschaft „border“ verwendet werden, um einen Schatteneffekt zu erzeugen. Es gibt zwei erforderliche Werte, um die Eigenschaft „border-style“ festzulegen: „h-offset“ und „v-offset“. Lassen Sie uns diese kurz definieren:

• h-offset: Dieser Wert legt den horizontalen Versatz des Schattens fest. Ein positiver Wert legt den Schatten auf der rechten Seite der Box fest, ein negativer Wert legt den Schatten auf der linken Seite fest.
• v-offset: Dieser Wert legt den vertikalen Versatz des Schattens fest. Ein positiver Wert legt den Schatten unterhalb der Box fest, ein negativer Wert legt den Schatten oberhalb fest.

Es gibt vier optionale Werte, die Sie nach den „h-offset“- und „v-offset“-Werten hinzufügen können, um den Box-Schatten zu beeinflussen. Werfen wir einen kurzen Blick auf diese:

• blur: Fügen Sie einen dritten Wert ein, um einen Unschärfeeffekt hinzuzufügen. Je höher die Zahl, desto unschärfer wird der Schatten.
• spread: Fügen Sie einen vierten Wert ein, um die Ausdehnung des Schattens zu definieren. Ein positiver Wert vergrößert die Größe des Schattens, ein negativer Wert verkleinert sie.
• color: Fügen Sie einen Farbnamen, einen Hex-Code oder einen anderen Farbwert ein, um die Farbe des Schattens zu definieren. Wenn kein Farbwert angegeben wird, ist die Schattenfarbe die Textfarbe.
• inset: Fügen Sie das Keyword „inset“ ein, um den Schatten innerhalb der Box zu setzen.

Sie können auch mehrere Schatten definieren. Trennen Sie dazu die erforderlichen und optionalen Werte einfach durch Kommas. Stellen Sie sicher, dass Sie die „h-offset“- und „v-offset“-Werte der Schlagschatten erhöhen, damit Sie sie tatsächlich sehen können.

Sehen wir uns im Folgenden Beispiele an, die durch verschiedene „border-shadow“-Werte definiert sind.

Siehe das Pen-Beispiel CSS Border Shadow von Christina Perricone (@hubspot) auf CodePen.

CSS-Eigenschaft „border-image“

Die CSS-Eigenschaft „border-image“ ermöglicht es Ihnen, ein Bild als Umrandung anstelle einer Umrandungslinie festzulegen.

Die Eigenschaft dient als Kurzschreibweise für die Eigenschaften „border-image-source“, „border-image-slice“, „border-image-width“, „border-image-outset“ und „border-image-repeat“. Bei Verwendung der Kurzschreibweise müssen nur drei Eigenschaften definiert werden. Diese sind:

• border-image-source: gibt die Bild-URL oder den Dateipfad an
• border-image-slice: gibt an, wie das Bild geschnitten werden soll
• border-image-repeat: gibt an, ob das Rahmenbild gestreckt, wiederholt oder abgerundet werden soll

Damit ein Bildrahmen gerendert werden kann, muss auch die Eigenschaft „border“ definiert sein.

Sehen wir uns im Folgenden Beispiele an, die durch verschiedene „border-image“-Werte definiert sind.

Siehe das Pen-Beispiel CSS Image Border von Christina Perricone (@hubspot) auf CodePen.

CSS-Border Gradient (Rahmenfarbverlauf)

Sie können auch die CSS-Eigenschaft „border-image“ verwenden, um einen Farbverlauf als Umrandung festzulegen.

Um einen Farbverlauf für den Rahmen zu erstellen, legen Sie die Eigenschaft „border-image“ auf „linear-gradient“ oder „repeating-linear-gradient“ fest. Dann fügen Sie in Klammern so viele Farben hinzu, wie Sie möchten.

Sie können eine beliebige Kombination aus HTML-Farbnamen, Hex-Farbcodes, RGB-Farbcodes und HSL-Farbwerten verwenden. Dann fügen Sie einen Wert hinzu, um die Eigenschaft „border-image-slice“ zu definieren.

Damit ein Farbverlauf im Rahmen gerendert werden kann, muss auch die Eigenschaft „border“ definiert sein.

Sehen wir ein paar Beispiele an:

Siehe das Pen-Beispiel CSS Border Gradient von Christina Perricone (@hubspot) auf CodePen.

Abgerundete Ecken in CSS („border-radius“)

Die CSS-Eigenschaft „border-radius“ kann verwendet werden, um die Ecken eines Rahmens abzurunden. Sie können diese Eigenschaft mit Längenwerten festlegen. Je höher der Wert, desto runder sind die Ecken.

Wie die Eigenschaften „border-style“, „border-width“, „border-color“ und „padding“ kann auch die Eigenschaft „border-radius“ zwischen einem und vier Werten haben.

Wenn nur ein Wert definiert wird, dann gilt er für alle Seiten des Elements. Werden zwei Werte definiert, so steht der erste Wert für die oberen und unteren Ecken des Rahmens und der zweite für die rechten und linken Ecken. Werden drei Werte definiert, dann steht der erste Wert für die obere Ecke, der zweite für die linke und rechte und der vierte für die untere Ecke. Werden vier Werte definiert, dann stehen sie jeweils für die obere, rechte, untere und linke Ecke.

Sehen wir uns im Folgenden Beispiele an, die durch verschiedene „border-radius“-Werte definiert sind.

Siehe das Pen-Beispiel Rounded Border in CSS von Christina Perricone (@hubspot) auf CodePen.

CSS-Eigenschaft „border-collapse“

Wenn Sie eine Tabelle in HTML erstellen und sowohl das Tabellenelement als auch die Tabellenzeilen- und Zellenelemente einen definierten Rahmen haben, können Sie die Rahmen getrennt halten. Oder Sie können den Abstand zwischen den Tabellenzellen mit der CSS-Eigenschaft „border-collapse“ entfernen.

So sieht ein einfaches Tabellenelement aus, bei dem die Eigenschaft „border-collapse“ auf „separate“ gesetzt ist. Bitte beachten Sie, dass der Wert dieser Eigenschaft standardmäßig separat ist und Sie sie daher in Ihrem CSS weglassen können.

So würde das Beispiel aussehen, wenn die Eigenschaft „border-collapse“ stattdessen auf „collapse“ gesetzt wäre.

Siehe das Pen-Beispiel CSS Border Collapse von Christina Perricone (@hubspot) auf CodePen.

Beachten Sie, dass, wenn die Eigenschaft „border-collapse“ auf „collapse“ gesetzt ist, die Eigenschaft „border-radius“ nicht gerendert wird. Sie müssen die Eigenschaft „border-collapse“ auf „separate“ setzen, um die Eigenschaft „border-radius“ verwenden zu können.

Fazit: Fügen Sie Rahmen hinzu, um Elemente auf Ihrer Website hervorzuheben

Rahmen können dazu beitragen, Inhalte auf Ihrer Website verständlicher und auffälliger zu machen. Dank der CSS-Rahmeneigenschaften gelingt es spielend leicht, Rahmen zu erstellen und zu gestalten. Mit einem Grundverständnis von HTML und CSS können Sie dieses Designelement schnell und einfach zu Ihren Webseiten hinzufügen.

Titelbild: dragana991 / iStock / Getty Images Plus