Softonic

CSS-Border-Radius-Generator

Schritt 1 / 2 CSS erstellen
Ergebnisse

border-radius sieht einfach aus, bis Sie erklären müssen, warum 50% bei einem Quadrat einen Kreis ergibt, aber 50% bei einem Rechteck eine Ellipse. Mit diesem Generator geben Sie für jede der vier Ecken einen Wert ein, wählen zwischen px, % und rem und kopieren die erzeugte Kurzform. Nützlich für Schaltflächenformen, Kartenecken, Pillen-Schaltflächen und asymmetrische Ecken.

So erstellen Sie einen Randradius

  1. 1

    Jede Ecke festlegen

    Geben Sie einen Radius für die Ecken oben links, oben rechts, unten rechts und unten links ein.

  2. 2

    Einheit wählen

    Pixel (feste Größe), Prozent (relativ zum Element) oder rem (relativ zur Root-Schriftgröße).

  3. 3

    CSS erzeugen

    Drücken Sie auf Generate CSS, um die Kurzform zu erstellen.

  4. 4

    Die Regel kopieren

    Kopieren Sie die `border-radius`-Kurzform und fügen Sie sie in Ihr Stylesheet ein.

Kurzform-Reihenfolge

border-radius: oben-links oben-rechts unten-rechts unten-links;

Gleich wie Margin/Padding: im Uhrzeigersinn beginnend oben-links. Ausgelassene Werte spiegeln die gegenüberliegende Ecke wider. border-radius: 10px 20px; bedeutet 10px oben-links und unten-rechts, 20px oben-rechts und unten-links.

Was der Generator nicht erzeugt

Er legt einen Radius pro Ecke fest und erzeugt daher keine elliptischen Ecken (die zweiwertige Form mit Schrägstrich wie border-radius: 20px 10px / 5px 15px;) und keine Langform-Eigenschaften wie border-top-left-radius. Wenn Sie diese brauchen, schreiben Sie das CSS von Hand.

Prozent vs. Pixel

Einheit Verhalten
px Fest, skaliert nicht mit der Elementgröße
% Prozentsatz der Elementbreite (horizontal) und Höhe (vertikal)
em Skaliert mit der Schriftgröße des Elements
rem Skaliert mit der Schriftgröße der Wurzel

50% bei einem quadratischen Element = Kreis. Bei einem 200x100 Rechteck, 50% = 100px horizontaler Radius + 50px vertikaler Radius = Ellipse.

Häufige Formen

Form CSS
Kreis (Quadrat) border-radius: 50%;
Pille border-radius: 9999px; (jeder Wert >= halbe Höhe)
Abgerundete Karte border-radius: 8px; oder 12px
Sprechblase border-radius: 18px 18px 0 18px; (Schwanz unten-rechts)
Subtil border-radius: 2px; oder 4px

Die “halbe Höhe”-Regel für Pillen

Eine Pillen-Schaltfläche ist ein Rechteck, bei dem die horizontalen Kappen perfekte Halbkreise sind. Um dies zuverlässig zu erreichen, setzen Sie border-radius auf mindestens die Hälfte der Höhe des Elements. Die Verwendung von 9999px (oder einem anderen sehr großen Wert) ist sicher, da der Browser den Radius auf die tatsächliche Geometrie beschränkt.

Interaktion mit Überlauf

border-radius schneidet standardmäßig nur den Hintergrund, den Rand und den Box-Schatten ab. Um untergeordnete Elemente (Bilder, verschachtelte Elemente) in die abgerundete Form zu schneiden, fügen Sie hinzu:

overflow: hidden;

oder verwenden Sie isolation: isolate + overflow: hidden, um auch Stapelkontexte zu enthalten.

Hinweis zur Barrierefreiheit

Es gibt kein Barrierefreiheitsproblem mit border-radius selbst, aber extreme Rundungen bei interaktiven Elementen (Pillen, Chips) sollten das Antippen-Ziel nicht verkleinern. Halten Sie Schaltflächen mindestens 44x44 px (WCAG-Empfehlung), unabhängig von der Eckenrundung.

Häufig gestellte Fragen

Weil der prozentuale Randradius als “% der Breite” horizontal und “% der Höhe” vertikal gemessen wird, bei einem nicht-quadratischen Element ergibt dies eine Ellipse. Für einen Kreis muss das Element quadratisch sein oder Pixelwerte verwenden, die den Abmessungen des Elements entsprechen.

Nur den Hintergrund, den Rand und den Box-Schatten standardmäßig. Untergeordnete Elemente werden nicht abgeschnitten, es sei denn, Sie fügen auch overflow: hidden zum übergeordneten Element hinzu.

Er ist zwischen numerischen Werten animierbar: transition: border-radius 200ms; funktioniert für Pixel und Prozent. Die Animation zwischen einer komplexen elliptischen Kurzform und einem einfachen Radius kann überraschende Zwischenzustände erzeugen; testen und die Start-/Endzustände vereinfachen, wenn es seltsam aussieht.

Die Spezifikation setzt keine Obergrenze, aber Browser beschränken den effektiven Radius auf die Hälfte der kürzeren Kante des Elements. Die Verwendung von border-radius: 9999px bei einer 40px hohen Schaltfläche erzeugt eine Pille, der Browser beschränkt stillschweigend auf 20px.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

HAR-Datei-Viewer

HAR-Netzwerkaufzeichnungen lokal öffnen, Anfragen filtern, maskierte Header und Zeitwerte prüfen und bereinigte Zusammenfassungen exportieren.