CSS Border-Radius
Sie können einen scharfen Rahmen um eine Box ziehen. Oft will das Design weichere Ecken — freundliche Karten, moderne Buttons, Avatare, die als Kreise gelesen werden. Das ist border-radius: wie stark jede Ecke rundet.
Was macht border-radius?
border-radius rundet die Ecken der Rahmenbox. Die Kurve gilt für Rahmenlinie und Hintergrund (und meist Bild-/Overflow-Clip). Ein größerer Wert bedeutet eine rundere Ecke. Übliche Einheiten: px oder %.
Ein Wert — alle vier Ecken
Der Alltagseinstieg: eine Länge für jede Ecke.
Gleicher Radius an allen Ecken
css.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}Was Sie sehen sollten
Der Rahmen folgt der Kurve, die weiße Füllung bleibt in der gerundeten Form. Radius ist kein zweiter Rahmen — er formt die vorhandene Box.
Kurzschreibweise: wie viele Werte?
Sie können eine, zwei, drei oder vier Längen angeben. Die Eckenreihenfolge ist fest.
📊 Anzahl der border-radius-Werte
| Werte | Bedeutung | Alltag |
|---|---|---|
| 1 | Alle vier Ecken gleich | Weiche Karten und Panels |
| 2 | Oben-links + unten-rechts, dann oben-rechts + unten-links | Diagonale Paare |
| 3 | Oben-links, oben-rechts + unten-links, unten-rechts | Seltener — Existenz kennen |
| 4 | Oben-links, oben-rechts, unten-rechts, unten-links | Volle Kontrolle, im Uhrzeigersinn ab oben-links |
Vier Ecken, vier Zahlen
Wenn jede Ecke eigene Rundung braucht, listen Sie vier Werte im Uhrzeigersinn ab oben-links.
Vier unterschiedliche Ecken
css.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}Zwei Werte — Diagonalpaare
Zwei Längen paaren gegenüberliegende Ecken: zuerst oben-links und unten-rechts; dann oben-rechts und unten-links.
Zweier-Diagonalradius
css.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}Pill-Buttons
Ein großer Radius (oft etwa die halbe Höhe oder ein großer Wert wie 999px) macht aus einem Rechteck eine Pille — üblich für Chips und Primäraktionen.
Pill-förmiger Button
css.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}Runde Avatare
Für einen echten Kreis brauchen Sie gleiche Breite und Höhe, dann border-radius: 50%. Auf einer nicht-quadratischen Box macht 50% eine Ellipse.
Kreis mit 50 Prozent Radius
css.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* schneidet ein Foto in den Kreis */
}Selbst ausprobieren
- Weichen Sie eine gerahmte Karte mit
border-radius: 12pxauf. - Gestalten Sie ein Badge mit vier verschiedenen Eckenradien.
- Nutzen Sie einen Zweiwerte-Radius auf einer Kachel und achten Sie auf die Diagonalpaare.
- Bauen Sie einen Pill-Button mit
border-radius: 999px. - Machen Sie einen 64×64-Avatar mit
border-radius: 50%— dann50%auf einem breiten Rechteck und vergleichen.
Typische Fehler
- Riesigen Radius auf leerer Box ohne Rahmen/Farbe setzen und sich wundern, warum „nichts sichtbar“ ist
50%auf einem breiten Rechteck und einen perfekten Kreis erwarten (Sie bekommen eine Ellipse)- Ungleiche Breite/Höhe trotz Kreiswunsch
- Denken,
border-radiusersetztborder— Sie brauchen weiter Rahmen oder Füllung, um die Kurve klar zu sehen - Eckenreihenfolge verwechseln (vier Werte: im Uhrzeigersinn ab oben-links)
Kurzfassung
border-radiusrundet die Ecken der Box- Ein Wert weicht alle Ecken auf; vier Werte steuern jede Ecke
- Zwei Werte paaren gegenüberliegende Ecken diagonal
- Große Radien machen Pills;
50%auf einem Quadrat macht einen Kreis - Die Kurve schneidet Rahmen und Hintergrund gemeinsam
- Üben Sie Karte, Pill und Avatar, bis die Formen selbstverständlich wirken
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt