CSS-Border-Radius-Generator

Funktionen von CSS-Border-Radius-Generator

• 01

  Einheitliche und Pro-Ecke-Modi

  Einheitlicher Modus wendet einen Radius auf jede Ecke an. Pro-Ecke-Modus kontrolliert oben-links, oben-rechts, unten-rechts und unten-links unabhängig — Pill, Blatt und asymmetrische Tag-Formen sind ein paar Klicks entfernt.

• 02

  Elliptische (X/Y) Ecken

  Schalte elliptischen Modus um, um einen horizontalen und einen vertikalen Radius pro Ecke anzugeben — die Syntax, die CSS für organische, Blob-ähnliche Formen unterstützt.

• 03

  Drei Einheiten

  Wechsle zwischen px, % und rem. Prozent-Werte erstellen echte Ellipsen, die mit der Box skalieren; rem-Werte verfolgender die Root-Schrift-Größe für Barrierefreiheit.

FAQ zu CSS-Border-Radius-Generator

Was ist der Unterschied zwischen px und %?

Pixel-Radii sind absolut — eine 16px-Ecke ist immer 16px. Prozent-Radii sind relativ zur Breite und Höhe des Elements, also erzeugt 50% einen perfekten Kreis auf einer quadratischen Box und eine Ellipse auf einem Rechteck.

Wann sollte ich elliptischen Modus verwenden?

Nutze elliptischen Modus, wenn du eine Ecke willst, die auf einer Achse stärker wölbt — zum Beispiel eine horizontale Pill (50%/100%) oder eine Blatt-ähnliche Blob-Form. CSS drückt das als `top-left-x top-right-x ... / top-left-y top-right-y ...` aus.

Warum sieht mein Prozent-Radius auf einer nicht-quadratischen Box falsch aus?

Prozente auf Border-Radius sind relativ zur entsprechenden Seite: horizontale Prozente zu Breite, vertikale zu Höhe. Auf einer breiten, kurzen Box bedeutet das, dass die Ecken in Ellipsen dehnen, nicht perfekte Bögen.

Funktioniert die Ausgabe in jedem Browser?

Ja — Border-Radius und elliptische Syntax werden in jedem modernen Browser unterstützt, einschließlich aller Evergreen-Versionen von Safari, Firefox, Edge und Chrome.