Border Radius Generator
Generate border radius
Generate border radius Läuft lokal in Ihrem Browser
border-radius: 12px;
About the
Der Border Radius Generator legt die vier Ecken einer Box unabhängig voneinander mit einer Live-Vorschau fest und stellt Ihnen das CSS zur Verfügung. Die Reihenfolge der Kurzschrift ist das, was jeder vergisst: Sie lautet: oben links, oben rechts, unten rechts, unten links, von oben links im Uhrzeigersinn. Ein Wert gilt für alle vier Ecken, zwei Werte gelten für die Diagonalpaare und vier Werte adressieren nacheinander jede Ecke. Wenn alle vier übereinstimmen, gibt das Tool die Einzelwertform aus, die Sie eigentlich am häufigsten benötigen.
Where people use the
- Anpassen eines Radius an eine Designspezifikation, ohne die Pixelwerte zu erraten.
- Abrunden nur der oberen Ecken einer Karte oder eines Modals.
- Formen eines Pillenknopfes, dessen Radius der halben Elementhöhe entspricht.
- Finden Sie den Radius, der einen quadratischen Avatar in einen Kreis verwandelt.
How to use the
- 1
Ziehen Sie einen Eckschieberegler
Jede Ecke hat einen eigenen Schieberegler von 0 bis 150 Pixel. Das Vorschaufeld wird abgerundet, wenn Sie es verschieben.
- 2
Behalten Sie die Verknüpfung der Ecken bei oder heben Sie die Verknüpfung auf
Wenn „Link“ aktiviert ist, werden durch Bewegen eines beliebigen Schiebereglers alle vier gleichzeitig verschoben. Schalten Sie es aus, um einzelne Ecken zu formen, so entsteht ein Sprechblasenschweif oder eine Blattform.
- 3
Lesen Sie das CSS
Wenn alle vier übereinstimmen, erhalten Sie die Kurzschrift mit einem Wert. Wenn sie unterschiedlich sind, erhalten Sie im Uhrzeigersinn die vollständige vierwertige Form.
- 4
Betrachten Sie stattdessen einen Prozentsatz
Ein Radius von 50 Prozent auf einem quadratischen Element ergibt einen Kreis. Tauschen Sie die px-Einheit gegen einen Prozentsatz in Ihrem Stylesheet aus, wenn Sie dies benötigen.
Tipps und Best Practices
- Verwenden Sie Prozentsätze, wenn die Größe des Elements geändert wird, und Pixel, wenn dies nicht der Fall ist.
- Ein Pillenknopf hat keinen festen Radius; es ist halb so hoch, daher ist 9999px die faule, aber robuste Antwort.
- Halten Sie den Radius über einen Komponentensatz hinweg konsistent. Das Mischen von 4 Pixel, 6 Pixel und 8 Pixel sieht zufällig aus.
Häufig gestellte Fragen
In welcher Reihenfolge sind die vier Werte?
Im Uhrzeigersinn von oben links: oben links, oben rechts, unten rechts, unten links. Eine nützliche Gedächtnisstütze besteht darin, dass sie dort anfängt, wo Sie mit dem Lesen beginnen, und sich wie ein Zifferblatt um die Uhr dreht.
Was bedeuten zwei oder drei Werte?
Zwei Werte legen die Diagonalen fest: der erste ist oben links und unten rechts, der zweite ist oben rechts und unten links. Drei Werte werden oben links, dann oben rechts und unten links zusammen und dann unten rechts festgelegt.
Wie mache ich einen Kreis?
Verwenden Sie 50 Prozent für ein Element, das bereits quadratisch ist. Die Verwendung von Pixeln ergibt nur dann einen Kreis, wenn der Radius der Hälfte der Breite entspricht, der unterbrochen wird, sobald die Größe des Elements geändert wird.
Kann ich Ecken horizontal und vertikal unterschiedlich abrunden?
Die vollständige Syntax ermöglicht die Schreibweise eines elliptischen Radius als horizontale Werte, als Schrägstrich und dann als vertikale Werte. Dieses Werkzeug gibt die einfachere einheitliche Form aus. Fügen Sie also die Schrägstrichversion von Hand hinzu, wenn Sie diese Form benötigen.
Warum ist meine abgerundete Ecke abgeschnitten?
Weil der untergeordnete Inhalt nicht auf das abgerundete Feld zugeschnitten ist. Fügen Sie dem Element einen ausgeblendeten Überlauf hinzu, sonst werden im darin enthaltenen Bild oder Hintergrund weiterhin quadratische Ecken angezeigt.