CSS

HTML

COMPONENTS

CODE HUB

CSS Rand-Generator

Konfiguration

Randbreite: 5px

Typ

Randfarbe

#000000

Klasse

Vorschau

Code

border: 5px solid #000000;

ReadyTools Academy

Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.

Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯

Jetzt starten

CSS Rand-Generator

In CSS können Sie Ränder für HTML-Elemente mit der border-Eigenschaft oder deren einzelnen Untereigenschaften anwenden. Ränder werden verwendet, um visuelle Grenzen um Elemente wie divs, Absätze oder Bilder zu erstellen.

Die border-Eigenschaft ermöglicht es Ihnen, mehrere Rand-Eigenschaften in einer einzigen Deklaration festzulegen. Sie besteht aus drei Hauptbestandteilen:

  • border-width Legt die Breite des Randes fest.
  • border-style Legt den Stil des Randes fest (z. B. solid, dashed, dotted).
  • border-color Legt die Farbe des Randes fest.

Hier ist ein Beispiel, wie Sie die border-Eigenschaft verwenden können, um einen soliden schwarzen Rand um ein Element zu erstellen:

.border-element { border: 2px solid #000000; }

In diesem Beispiel:

  • Die Klasse .border-element wendet einen 2 Pixel breiten, soliden schwarzen Rand auf das Element an.

Sie können auch einzelne Rand-Eigenschaften separat angeben, wenn Sie mehr Kontrolle über jeden Aspekt des Randes wünschen:

.border-individual-element { border-width: 3px; border-style: dashed; border-color: #FF0000; }

In diesem Fall:

  • Die Klasse .border-individual-element setzt einen 3 Pixel breiten, gestrichelten roten Rand um das Element.

Sie können die border-Eigenschaft und ihre einzelnen Untereigenschaften anpassen, um verschiedene Randstile, -breiten und -farben für Ihre HTML-Elemente zu erstellen und so die gewünschten visuellen Effekte und Designästhetiken zu erzielen.