CSS
HTML
COMPONENTS
CODE HUB
CSS Rand-Generator
Konfiguration
Randbreite: 5px
Typ
Randfarbe
#000000
Klasse
Vorschau
Code
border: 5px solid #000000;Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara startenCSS 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.