Rahmen¶

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

Rahmenstärke
Rahmenstil
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);
}

Rahmen

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);
}

Rahmen

border-radius¶

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

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

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;
}

div {
  border-radius: 20px;
}

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

Rahmen

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