What is the difference between 4-value and 8-value border-radius?

4-value syntax sets the radius for each corner (top-left, top-right, bottom-right, bottom-left). 8-value syntax separates horizontal and vertical radii using a slash, allowing asymmetric organic shapes like blobs.

How do I create a perfect circle with border-radius?

Set border-radius to 50% on a square element (equal width and height). For example: width: 100px; height: 100px; border-radius: 50%; This creates a perfect circle.

Can I use different units for border-radius?

Yes! You can use pixels (px), percentages (%), em, rem, or any CSS length unit. Percentages are relative to the element's dimensions, making them perfect for responsive designs.

What are blob shapes and how to create them?

Blob shapes are organic, asymmetric forms created using the 8-value border-radius syntax. Example: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; The values before the slash control horizontal radii, after the slash control vertical radii.

Is border-radius supported in all browsers?

Yes, border-radius has excellent browser support (99%+ globally). All modern browsers support it without prefixes. Even IE9+ supports basic border-radius, though the 8-value syntax may require IE10+.

CSS-Border-Radius-Generator

Alles erstellen, von leicht abgerundeten Buttons bis zu organischen Blobs mit der vollen Kraft von CSS3 border-radius.
100% Kostenlos — Keine Registrierung erforderlich.

8Kontrollpunkte

99%+Browser-Unterstützung

0Registrierung erforderlich

Simple

CSS Output:

border-radius: 20px;

Top Left 20px

Top Right 20px

Bottom Left 20px

Bottom Right 20px

Element

Background

Häufige Anwendungsfälle

Wo border-radius den größten Einfluss im UI-Design hat

🔘

Buttons & CTAs

Abgerundete Buttons fühlen sich klickbarer und moderner an. Von subtilen 4px bis zu voll abgerundeten Pillen-Buttons.

👤

Avatar-Bilder

Kreisförmige Avatare mit 50% Radius sind Standard in modernem UI. Quadratische Bilder werden sofort zu Kreisen.

🃏

Karten & Container

Abgerundete Karten fühlen sich weicher und einladender an. Standardwerte: 8px, 12px oder 16px.

🫧

Blob-Hintergründe

Organische Blob-Formen für Hero-Sections, dekorative Elemente und moderne Landing-Pages.

CSS Border Radius verstehen

Die border-radius-Eigenschaft rundet die Ecken der äußeren Rahmen-Kante eines Elements ab. Während die meisten einfache Werte wie 10px verwenden, erlaubt CSS unglaublich leistungsstarke 8-Wert-Syntax für organische, asymmetrische Formen.

Wert-Syntax-Optionen

1 Wert: border-radius: 10px; — Alle vier Ecken gleich
2 Werte: border-radius: 10px 20px; — Oben-links/unten-rechts, oben-rechts/unten-links
4 Werte: border-radius: 10px 20px 30px 40px; — Im Uhrzeigersinn von oben-links
8 Werte: border-radius: a b c d / e f g h; — Horizontale / Vertikale Radien unabhängig

Das Blob-Geheimnis: 8-Wert-Syntax

Durch Trennen von horizontalen und vertikalen Radien mit einem Schrägstrich (/) erstellen Sie asymmetrische Kurven an jeder Ecke. So werden moderne Blob-Formen gemacht — kein SVG erforderlich!

CSS-Syntax & Beispiele

Kopierfertige Code-Beispiele für verschiedene border-radius-Stile

CSSStandard Corners

/* Uniform rounded corners */
.card {
  border-radius: 12px;
}

/* Pill button */
.pill-button {
  border-radius: 9999px;
}

/* Perfect circle */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

/* Specific corners (TL, TR, BR, BL) */
.custom {
  border-radius: 20px 8px 20px 8px;
}

CSSBlob Shapes (8-Value)

/* Basic blob */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Smooth organic shape */
.organic {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Animated blob */
.animated-blob {
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

Häufig gestellte Fragen (FAQ)

Was ist der Unterschied zwischen 4-Wert- und 8-Wert-Syntax?

4-Wert setzt den Radius für jede Ecke (oben-links, oben-rechts, unten-rechts, unten-links). 8-Wert trennt horizontale und vertikale Radien mit einem Schrägstrich für asymmetrische organische Formen.

Wie erstelle ich einen perfekten Kreis?

Setzen Sie border-radius: 50% auf ein quadratisches Element (gleiche Breite und Höhe). Für Pillen-/Kapselformen verwenden Sie border-radius: 9999px.

Kann ich Prozent verwenden?

Ja! Prozent werden relativ zu den Elementdimensionen berechnet. Horizontale Prozent verwenden Breite, vertikale Prozent verwenden Höhe. So funktionieren Blob-Formen.

Wofür werden Blob-Formen verwendet?

Blob-Formen sind beliebt für Hero-Hintergründe, dekorative Elemente, abstrakte Kunst und um organisches, freundliches Gefühl zu starren Layouts hinzuzufügen. Kein SVG oder Bilder nötig!