Toggle Light / Dark / Auto color theme

Toggle table of contents sidebar

Rahmen

Ein Rahmen um Elemente kann anhand der CSS Eigenschaft border erstellt werden. Der Eigenschaft müssen 3 Werte übergeben werden:

1. Rahmenstärke

2. Rahmenstil

3. Rahmenfarbe

Eigenschaftswert	Erklärung
Rahmenstärke	Die Stärke des Rahmens wird durch die Einheit px angegeben.
Rahmenstil	Es stehen verschiedene Stile durch CSS zur Verfügung. dotted: gepunkteter Rahmen dashed: gestrichelter Rahmen solid: durchgezogener Rahmen double: zwei durchgezogene Rahmen groove: eingravierter Rahmen ridge: Effektrahmen inset: Effektrahmen outset: Effektrahmen none: kein Rahmen
Rahmenfarbe	Kann als Farbname, Hex-Wert oder RGB-Wert angegeben werden.

h2 {
  border: 2px solid aqua;
}

h3 {
  border: 6px dotted #FFD700;
}

p {
  border: 4px inset rgb(255, 127, 80);
}

See the Pen border1 by csswebsite (@csswebsite) on CodePen.

Rahmenseiten

Jede Seite eines Rahmens kann individuell angepasst werden und kann auch einzeln angewendet werden. Dazu bietet CSS die folgenden Eigenschaften:

Eigenschaft	Erklärung
border-top	Definiert das Aussehen der oberen Rahmenlinie.
border-right	Definiert das Aussehen der rechten Rahmenlinie.
border-bottom	Definiert das Aussehen der unteren Rahmenlinie.
border-left	Definiert das Aussehen der linken Rahmenlinie.

h2 {
  border-top: 2px solid aqua;
}

h3 {
  border-right: 6px dotted #FFD700;
}

p {
  border-bottom: 4px dashed rgb(255, 127, 80);
}

See the Pen border2 by csswebsite (@csswebsite) on CodePen.

border-radius

Durch der CSS Eigenschaft border-radius kann jede Ecke eines Rahmens abgerundet werden. Wenn vier verschiedene Werte border-radius übergeben werden, stehen diese für top, right, bottom und left. Jede Ecke kann auch über die Angaben border-top-left-radius, border-top-right-radius, border-bottom-left-radius und border-bottom-right-radius einzeln angesprochen werden.

Bemerkung

border-radius kann auch auf Bilder angewendet werden. Ein quadratisches Bild kann mittels border-radius in einen Kreis transformiert werden.

h2 {
  border: 2px solid aqua;
  border-radius: 14px;
}

h3 {
  border: 6px solid #FFD700;
  border-radius: 4px 8px 2px 12px;
}

p {
  border: 4px inset rgb(255, 127, 80);
  border-radius: 6px;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

img.rund {
  border-radius: 50%;
}

See the Pen border3 by csswebsite (@csswebsite) on CodePen.

Weitere tolle Gestaltungsmöglichkeiten mit border-radius sind der Seite CSS Shapes zu finden.