DevToolPal
DE

CSS-Border-Radius-Generator

CSS-border-radius pro Ecke einstellen, mit elliptischen Ecken und Blob-Formen, in px, % oder rem, mit Live-Vorschau, Vorlagen und dem kürzesten CSS zum Kopieren.

Läuft lokal, wird nie hochgeladen

Ecken

Einheit

Vorschau

CSS

Vorlagen
Border-Radius-CSS
 
 
 
 
 
Was das Tool macht


Mit dem Border-Radius-Generator formen Sie abgerundete Ecken visuell und kopieren das kürzeste CSS. Verwenden Sie einen Radius für alle Ecken oder einen pro Ecke, schalten Sie elliptische Ecken ein, um jeder Ecke einen eigenen horizontalen und vertikalen Radius zu geben, und sehen Sie zu, wie sich die Vorschau beim Ziehen ändert. Es funktioniert mit px, %, rem oder em, und Sie können einen vorhandenen border-radius-Wert zum Bearbeiten einfügen. Alles läuft in Ihrem Browser.


So funktioniert es


    

  1. Starten Sie mit einer Vorlage oder behalten Sie die Beispielform.
    2. 

  2. Wählen Sie die Einheit. Beim Wechsel werden die aktuellen Werte umgerechnet (rem und em zählen als 16px, % bezieht sich auf die Vorschaubox).
    3. 

  3. Schalten Sie Gleicher Radius für alle Ecken ein für einen einzigen Regler, oder aus, um Oben links, Oben rechts, Unten rechts und Unten links getrennt einzustellen.
    4. 

  4. Schalten Sie Elliptische Ecken ein, um pro Ecke einen Regler Horizontal und Vertikal zu erhalten.
    5. 

  5. Ändern Sie die Vorschaugröße mit Breite und Höhe und kopieren Sie den Code aus der Karte CSS. Aktivieren Sie die Longhand-Ausgabe, wenn Sie vier einzelne Eigenschaften bevorzugen.
    6. 



Beispiel


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Gut zu wissen


    

  • Kürzeste Form. Die Ausgabe fasst gleiche Werte zusammen: Vier gleiche Ecken werden zu einem Wert, und der Teil nach dem Schrägstrich entfällt, wenn alle Ecken kreisförmig sind.
    • 

  • Prozente folgen der Box. Horizontale Prozentwerte beziehen sich auf die Breite, vertikale auf die Höhe – 50% auf einem Rechteck ergibt also eine Ellipse, keinen Kreis.
    • 

  • Radien, die nicht passen, verkleinert der Browser gemeinsam. Deshalb ergibt ein riesiger px-Wert eine saubere Pille.
    • 

  • Kinder und Überlauf. Abgerundete Ecken beschneiden Hintergrund und Rahmen, aber nicht den Inhalt von Kindelementen: Fügen Sie overflow: hidden hinzu, um Bilder in der Box zu beschneiden.
    • 

 
  
 
FAQ
 
 
  › Was bedeutet der Schrägstrich in border-radius?  
Werte vor dem Schrägstrich sind die horizontalen Radien, Werte danach die vertikalen. Unterscheiden sie sich, wird die Ecke zu einem Viertel einer Ellipse statt eines Kreises. 50% / 30% ergibt zum Beispiel eine flachere Kurve als 50%.
 
  › In welcher Reihenfolge stehen die vier Ecken?  
Im Uhrzeigersinn ab oben links: oben links, oben rechts, unten rechts, unten links. Bei weniger Werten wiederholt CSS sie: Zwei Werte setzen oben links/unten rechts und oben rechts/unten links, drei Werte setzen oben links, oben rechts/unten links und unten rechts.
 
  › Wie mache ich einen Kreis oder eine Pille?  
border-radius: 50% macht aus einem Quadrat einen Kreis und aus einem Rechteck eine Ellipse. Für eine Pille mit runden Enden bei jeder Breite nehmen Sie eine sehr große Länge wie 9999px: Der Browser verkleinert Radien, die nicht passen, die Enden bleiben also perfekt rund.
 
  › Wie entstehen Blob-Formen?  
Blobs verwenden acht verschiedene Prozentwerte: vier horizontale und vier vertikale Radien, etwa 30% 70% 70% 30% / 30% 30% 70% 70%. Wählen Sie eine Blob-Vorlage, schalten Sie Elliptische Ecken ein und formen Sie sie mit den Reglern der einzelnen Ecken um.