CSS Academy · Lektion

Rahmenstile, -breite und -farbe

Wenden Sie mit Kurz- und Langschreibweisen Rahmen mit unterschiedlichen Stilen, Breiten und Farben an.

Lektion 2 von 413 Schritte

Rahmenstile, -breite und -farbe ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Kurzschreibweise für border

Die Kurzschreibweise border legt alle vier Seiten gleichzeitig fest: Breite, Stil und Farbe.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Werte von border-style

border-style muss gesetzt sein, damit ein Rahmen angezeigt wird. Verfügbare Werte:

solid – durchgezogene Linie
dashed – lange Striche
dotted – runde Punkte
double – zwei parallele Linien
groove/ridge/inset/outset – 3D-Effekte
none – kein Rahmen (Standard)

border-width

border-width akzeptiert jede Längeneinheit sowie die Schlüsselwörter thin, medium und thick. Verwenden Sie Zahlen für eine präzise Angabe.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color akzeptiert jeden CSS-Farbwert, einschließlich RGBA für Transparenz. currentColor übernimmt die Textfarbe.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Rahmen einzelner Seiten

Legen Sie Rahmen für bestimmte Seiten mit Eigenschaften in Langschreibweise fest:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius rundet die Ecken von Elementen ab. Verwenden Sie einen einzelnen Wert für eine gleichmäßige Rundung oder bis zu vier Werte für die Kontrolle jeder Ecke.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

Elliptisches border-radius

Für eine asymmetrische elliptische Rundung kann jeder Eckenradius zwei durch / getrennte Werte erhalten:

<div class="leaf"></div>

border-image

border-image ersetzt den Rahmen durch ein zugeschnittenes Bild oder einen Verlauf und ermöglicht dekorative Rahmen:

<div class="fancy">Gradient border image</div>

outline im Vergleich zu border

outline zeichnet eine Linie außerhalb des Rahmens. Anders als border beeinflusst es weder das Layout noch die Abmessungen des Elements. Es wird häufig für Fokusindikatoren der Tastaturnavigation verwendet.

<button class="focus-demo">Focused Button (demo)</button>

outline entfernen: mit Bedacht

Entfernen Sie :focus-Konturen niemals, ohne eine andere sichtbare Fokusanzeige bereitzustellen. Das Entfernen von Fokusstilen beeinträchtigt Benutzer der Tastatur und von Screenreadern.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse für Tabellen

Bei HTML-Tabellen fügt border-collapse: collapse benachbarte Zellrahmen zu einer einzigen Linie zusammen und sorgt so für ein übersichtlicheres Erscheinungsbild.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Kurztest

Welche CSS-Eigenschaft zeichnet eine Linie außerhalb des Rahmens, ohne das Layout des Elements zu beeinflussen?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Die Kurzschreibweise border legt Breite, Stil und Farbe fest. border-radius rundet Ecken ab. outline ist vom Rahmen getrennt – es beeinflusst das Layout nicht und ist für sichtbare Fokusindikatoren zur Barrierefreiheit mit der Tastatur entscheidend.

Kostenlos starten

Lerne CSS mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Rahmenstile, -breite und -farbe“ kostenlos?

Ja — der vollständige Text von „Rahmenstile, -breite und -farbe“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Rahmenstile, -breite und -farbe“?

Wenden Sie mit Kurz- und Langschreibweisen Rahmen mit unterschiedlichen Stilen, Breiten und Farben an. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Rahmenstile, -breite und -farbe“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Breite, Höhe, Margin und Padding verstehen
Rahmenstile, -breite und -farbe
Box-Sizing: Content-Box vs. Border-Box
Outline und Box-Shadow

← Zurück zu CSS Academy