Zum Inhalt springen
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Generator für abgerundete Ecken (border-radius)

Stellen Sie den Radius jeder Ecke einzeln ein und erhalten Sie den CSS-Code für border-radius mit Live-Vorschau.

Wird auf Ihrem Gerät verarbeitet. Es wird nichts an einen Server gesendet.
border-radius: 24px 24px 24px 24px;

Erzeugt die Kurzschreibweise von border-radius mit den vier Werten in der Reihenfolge oben links, oben rechts, unten rechts, unten links.

Anwendungsfälle

  • Eine Karte mit asymmetrischen Ecken gestalten.
  • Eine Tropfen- oder Sprechblasenform entwerfen.
  • Die Rundung eines Buttons visuell feinjustieren.

So funktioniert's

  1. 1

    Jede Ecke einstellen

    Geben Sie für jede der vier Ecken den Radius in Pixeln ein.

  2. 2

    CSS kopieren

    Kopieren Sie die fertige border-radius-Eigenschaft.

Technische Details

  • Jede Ecke erlaubt 0 bis 200 Pixel. Der Code folgt der CSS-Reihenfolge: oben links, oben rechts, unten rechts, unten links.
  • Übersteigt ein Radius die halbe Seitenlänge des Elements, verkleinert der Browser ihn proportional; deshalb ergibt ein sehr hoher Wert bei einem kleinen Button eine Pillenform.
  • Gerechnet wird nur in Pixeln. Für einen perfekten Kreis bei einem quadratischen Element beliebiger Größe schreiben Sie selbst border-radius: 50%.

Häufige Fragen

Kann ich pro Ecke einen anderen Radius einstellen?

Ja, jede der vier Ecken wird unabhängig gesteuert.

Ähnliche Tools

← Farben & Design