CSS-Ränder (Borders)

CSS-Ränder (Borders) ermöglichen es, Elemente visuell abzugrenzen, hervorzuheben oder einzurahmen. Durch die Kombination von Rändern kann ein modernes, ästhetisches und gut strukturiertes Design entstehen.

Grundlegende Rand-Einstellungen

Mit der Eigenschaft <border> können Randbreite, -stil und -farbe gleichzeitig festgelegt werden. Beispiel: <border: 2px solid black;>.

Im folgenden Beispiel erhält ein <div>-Element einen 2px dicken schwarzen, durchgehenden Rand:

Verschiedene Randstile

Ränder können verschiedene Stile haben: solid, dashed, dotted, double, groove, ridge, inset und outset. Damit lässt sich das Erscheinungsbild von Elementen variieren.

Abgerundete Ränder

Mit der Eigenschaft <border-radius> können die Ecken von Elementen abgerundet werden. Dies kann für leichte Abrundungen oder vollständig runde Elemente verwendet werden.

Unterschiedliche Ränder je Seite

Es ist nicht erforderlich, für alle Seiten denselben Rand festzulegen. Mit <border-top>, <border-right>, <border-bottom> und <border-left> können sie individuell gesteuert werden.

Tipps zur Verwendung von Rändern

Ränder können helfen, die visuelle Hierarchie und das Design zu verbessern. Hier einige Tipps:

• Wähle kontrastreiche Randfarben für bessere Sichtbarkeit.
• Vermeide zu dicke Ränder, da sie die Lesbarkeit des Inhalts beeinträchtigen können.
• Verwende Ränder kreativ, kombiniere sie mit anderen Stilen (z. B. Schatten, Hintergrundfarbe), um ein modernes Erscheinungsbild zu erzielen.