CSS Border & Styling

Ein Border ist der Rahmen um ein HTML-Element. Er kann um Boxen (wie div, p, img) gezogen werden und lässt sich mit CSS komplett anpassen: Farbe, Stil, Breite, Rundungen und mehr.

Die 3 Border-Eigenschaften

border-widthBreite des Rahmens
border-styleStil des Rahmens, zum Beispiel solid oder dashed
border-colorFarbe des Rahmens

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

1. border-width

border-width (Rahmenbreite) bestimmt die Dicke des Rahmens.

border-width: 1px;       /* 1 Pixel breit */
border-width: 0.5em;     /* halb so gross wie die Schriftgrösse */
border-width: thin;      /* vordefinierte dünne Breite */
border-width: medium;    /* Standardbreite */
border-width: thick;     /* dicker Rahmen */

Dynamische border-width mit clamp()

Auch die Breite eines Rahmens kann mit clamp() flexibel definiert werden. Ob ein responsiv wachsender Rahmen sinnvoll ist, hängt von der Gestaltung ab.

border: clamp(1px, 0.3vw, 4px) solid indigo;

2. border-style

border-style (Rahmenstil) ist der wichtigste Teil, sonst wird der Rahmen nicht angezeigt.

Die Werte none und hidden erzeugen keinen sichtbaren Rahmen.

border-style: none;   /* kein Rahmen, Standardwert */
border-style: hidden; /* kein Rahmen, hat bei zusammenfallenden Tabellenrahmen Vorrang */

Border solid

border: 5px solid indigo;

Border dotted

border: 5px dotted indigo;

Border dashed

border: 5px dashed indigo;

Border double

border: 5px double indigo;

Border groove

border: 5px groove indigo;

Border ridge

border: 5px ridge indigo;

Border inset

border: 5px inset indigo;

Border outset

border: 5px outset indigo;

3. border-color

border-color (Rahmenfarbe) kann alle CSS-Farbwerte annehmen:

Schlüsselworte: red, blue, black, etc.
Hex: #ff0000
RGB: rgb(255,0,0)
RGBA (mit Transparenz): rgba(255,0,0,0.5)
HSL: hsl(0, 100%, 50%)

Kurzschreibweise

Die Kurzschreibweise border fasst Breite, Stil und Farbe des Rahmens zusammen.

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

div {
  border: 2px solid black;
}

Mindestens border-style muss angegeben werden, sonst wird kein Rahmen angezeigt.

Border-Seiten separat ansprechen

Man kann die Ränder für jede Seite separat definieren:

border-top
border-right
border-bottom
border-left

Jede Eigenschaft kann wieder in die drei Bestandteile zerlegt werden:

border-top-width: 3px;
border-top-style: solid;
border-top-color: blue;

Kurzschreibweise

border-top: 3px dashed green;

Unterschiedliche Seiten unterschiedlich gestalten

border-top: 3px solid red;
border-right: 5px dashed pink;
border-bottom: 2px dotted black;
border-left: 4px double purple;

border-color: black;
border-width: 1px 2px 3px 4px;
border-style: solid;

Logische Border-Eigenschaften

Eigenschaften wie border-top oder border-left beziehen sich auf feste Seiten einer Box. Logische Border-Eigenschaften orientieren sich dagegen an der Schreib- und Leserichtung.

Bei einer horizontalen Schreibrichtung von links nach rechts entsprechen die logischen Richtungen folgenden Seiten:

blockAchse der untereinander angeordneten Inhalte (oben/unten)
block-startAnfang der Blockachse (oben)
block-endEnde der Blockachse (unten)
inlineAchse innerhalb einer Textzeile (links/rechts)
inline-startAnfang der Inlineachse (links)
inline-endEnde der Inlineachse (rechts)

Der Rahmen kann für jede logische Seite einzeln festgelegt werden.

border-block-start: 2px solid indigo;
border-block-end: 2px solid indigo;

border-inline-start: 2px dashed deeppink;
border-inline-end: 2px dashed deeppink;

Kurzschreibweise

Mit border-block und border-inline werden beide Seiten einer Achse zusammengefasst.

border-block: 2px solid indigo;
border-inline: 2px dashed deeppink;

Bei einer Schreibrichtung von links nach rechts entspricht border-block dem oberen und unteren Rahmen und border-inline dem linken und rechten Rahmen. Ändert sich die Schreibrichtung, passen sich die Seiten automatisch an.

Formen mit Borders

An den Ecken treffen benachbarte Borders diagonal aufeinander. Bei gleich breiten Borders entsteht ein Winkel von 45 Grad. Dieses Verhalten lässt sich nutzen, um mit CSS einfache Formen wie Dreiecke und Pfeile zu gestalten.

.border-corners {
  width: 0;
  height: 0;
  border: 50px solid;
  border-color: deeppink cyan indigo gold;
}

.triangle {
  width: 0;
  height: 0;
  border-inline: 30px solid transparent;
  border-block-end: 40px solid indigo;
}

.chevron {
  width: 40px;
  aspect-ratio: 1;
  border-right: 8px solid indigo;
  border-bottom: 8px solid indigo;
  rotate: -45deg;
}

CSS kann sprechen.

.speech {
  position: relative;
  width: 220px;
  padding: 20px;
  border-radius: 16px;
  background: indigo;
  color: white;
}

.speech::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top-color: indigo;
}

Hover Animation

.speech:hover {
  animation: chatter 0.2s ease-in-out 3 alternate;
}

@keyframes chatter {
  to {
    translate: 0 -6px;
    rotate: -2deg;
  }
}

Border Images

Mit border-image kann ein Bild oder ein Verlauf als Rahmen verwendet werden. Ein normaler Border definiert zunächst den benötigten Platz.

border-image-sourceBild oder Verlauf für den Rahmen
border-image-sliceteilt die Quelle in Bereiche für Kanten und Ecken
border-image-widthBreite des gezeichneten Border Images
border-image-outsetverschiebt das Border Image nach aussen
border-image-repeatbestimmt, ob die Kanten gestreckt oder wiederholt werden
border-imageKurzschreibweise für alle Border-Image-Eigenschaften

Verlauf

border: 4px solid transparent; /* Platzhalter-Rahmen */
  border-image-source: linear-gradient(to right, red, yellow);
  border-image-slice: 1;

Background Image

border: 10px solid transparent;
border-image: url("../images/list2.gif") 30% round;

w3schools

Nützliche Border-Eigenschaften

border-collapse (für Tabellenrahmen)
outline – ähnlich wie border, aber wird nicht Teil des Boxmodells (ausserhalb des Rahmens, z.B. bei Fokus-Styling)

Nurse Runde Ecken lassen sich mit CSS Border-Radius gestalten. Eine Linie ausserhalb des Box-Modells entsteht mit CSS Outline.