Developer ToolsBorder-Radius-Generator
Erstellen Sie visuell komplexe CSS-border-radius-Formen mit unabhängiger Eckenkontrolle. Live-Vorschau und sofortiges Kopieren von fertigem CSS-Code.
Ecken-Einstellungen
Einheit:
Vorschau und CSS-Code
border-radius: 8px
Kurzschreibweise
.element {
border-radius: 8px;
}Langform
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}Verwandte Werkzeuge
Über den Border-Radius-Generator
So funktioniert es
- Passen Sie jede Ecke mit den Schiebereglern oder Zahlenfeldern an
- Aktivieren Sie 'Alle Ecken verknüpfen', um alle vier Ecken gleichzeitig zu steuern
- Wählen Sie eine Einheit (px oder %) je nach gewünschtem Größentyp
- Verwenden Sie Presets, um gängige Formen wie Kreis, Pille oder Quadrat sofort anzuwenden
- Passen Sie Vorschau-Hintergrund und Elementfarbe für eine realistische Ansicht an
- Kopieren Sie den generierten CSS-Code in Kurz- oder Langform mit einem Klick
Häufige Anwendungsfälle
- Gestalten von Schaltflächen, Karten und Eingabefeldern mit abgerundeten Ecken
- Erstellen von pillenförmigen Tags und Badges im UI-Design
- Aufbau kreisförmiger Avatare und Icons mit border-radius 50%
- Generieren einzigartiger asymmetrischer Formen für kreative Layouts
- Prototypisierung von UI-Komponenten mit präziser Eckenkontrolle
- Lernen und Experimentieren mit CSS-border-radius-Werten
Häufig gestellte Fragen
Was ist CSS border-radius?
CSS border-radius ist eine Eigenschaft, die die Ecken des Rahmenrahmens eines Elements abrundet. Sie akzeptiert ein bis vier Werte, die die Radien der oben-links, oben-rechts, unten-rechts und unten-links Ecken definieren.
Wie verwende ich den Border-Radius-Generator?
Verwenden Sie die Schieberegler oder Zahlenfelder, um jede Ecke unabhängig anzupassen. Die Live-Vorschau aktualisiert sich sofort und Sie können den generierten CSS-Code mit einem Klick kopieren.
Kann ich für jede Ecke einen anderen Wert festlegen?
Ja. Deaktivieren Sie die Option 'Alle Ecken verknüpfen', um jede Ecke (oben-links, oben-rechts, unten-rechts, unten-links) unabhängig für asymmetrische Formen zu steuern.
Was ist der Unterschied zwischen CSS-Kurzschreibweise und Langform?
Die Kurzschreibweise border-radius legt alle vier Ecken auf einmal fest. Die Langform-Eigenschaften (border-top-left-radius usw.) legen jede Ecke einzeln fest.
Wie erstelle ich einen Kreis mit CSS border-radius?
Setzen Sie border-radius auf 50% bei einem quadratischen Element. Verwenden Sie das Preset 'Kreis' in diesem Tool, um es sofort anzuwenden.
Wie erstelle ich eine Pillen-/Kapselform?
Setzen Sie border-radius auf einen sehr großen Wert (z. B. 9999px) für eine Pillenform. Verwenden Sie das Preset 'Pille' für die Anwendung mit einem Klick.
Unterstützt border-radius Prozentwerte?
Ja. Prozentwerte sind relativ zu den Abmessungen des Elements: 50% erzeugt eine kreisförmige Form bei einem quadratischen Element. Dieses Tool unterstützt Pixel (px) und Prozent (%).
Was bedeuten zwei Werte in der border-radius-Kurzschreibweise?
Bei zwei Werten gilt der erste für die Ecken oben-links und unten-rechts, der zweite für die Ecken oben-rechts und unten-links.
Ist das generierte CSS mit allen Browsern kompatibel?
Ja. Die border-radius-Eigenschaft wird in allen modernen Browsern und Internet Explorer 9+ unterstützt.
Kann ich die Form mit einer Hintergrundfarbe vorschauen?
Ja. Die Live-Vorschau zeigt die Form mit einer anpassbaren Hintergrundfarbe, damit Sie genau sehen, wie die abgerundeten Ecken aussehen werden.
Wie setze ich auf Standardwerte zurück?
Klicken Sie auf die Schaltfläche 'Zurücksetzen', um alle Ecken auf 8px wiederherzustellen, den in den meisten UI-Frameworks verwendeten Standardwert.
Welche Presets sind verfügbar?
Dieses Tool enthält Presets für gängige Formen: Quadrat (0px), Leicht (4px), Gerundet (8px), Extra Gerundet (16px), Pille (9999px) und Kreis (50%).