Zum Hauptinhalt springen

CSS-Border-Radius-Generator

Kostenloses Online-Tool zum visuellen Erstellen von CSS border-radius und zum Kopieren des Codes.

Preview

Modus

Abrundung

px

CSS-Code

border-radius: 20px;

Vorlagen

Hauptfunktionen​

  • 2 Modi: Alle-Modus, Einzelne-Ecken-Modus
  • Echtzeit-Vorschau: Änderungen sofort sehen
  • Feinsteuerung: 0-200px Bereich
  • 9 Voreinstellungen: Häufige abgerundete Stile
  • Ein-Klick-Kopieren: CSS-Code sofort kopieren

Was ist Border Radius?​

border-radius ist eine CSS-Eigenschaft, die die Ecken von Elementen abrundet.

Grundlegende Syntax​

/* Alle Ecken gleich */
border-radius: 10px;

/* Einzelne Ecken */
border-radius: 10px 20px 30px 40px;
/* Reihenfolge: oben-links, oben-rechts, unten-rechts, unten-links */

Voreingestellte Stile​

Square (Quadrat)​

border-radius: 0px;

Scharfe Ecken, klassisches Design

Slightly Rounded (Leicht Abgerundet)​

border-radius: 4px;

Subtile Rundung, raffiniertes Gefühl

Rounded (Abgerundet)​

border-radius: 8px;

Moderate Rundung, vielseitigste

Very Rounded (Sehr Abgerundet)​

border-radius: 16px;

Weiches Gefühl, freundliches Design

Pill (Pille)​

border-radius: 50px;

Perfekt für Buttons und Tags

Circle (Kreis)​

border-radius: 9999px; /* oder 50% */

Profilbilder, Icons

Top Only (Nur Oben)​

border-radius: 12px 12px 0 0;

Modal-Header, Karten-Oberseiten

Bottom Only (Nur Unten)​

border-radius: 0 0 12px 12px;

Modal-Footer, Dropdowns

Blob (Blob)​

border-radius: 30px 60px 30px 60px;

Organische Formen, einzigartiges Design

Browser-Kompatibilität​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ Alle mobilen Browser

Verwandte Tools​