CSS Border Radius Generator
Visueller CSS Border Radius Generator. Passen Sie jede Ecke unabhängig an mit Echtzeitvorschau und kopieren Sie den CSS-Code sofort.
Was ist CSS border-radius?
CSS border-radius ist eine Eigenschaft, die die Ecken des äußeren Rahmens eines Elements abrundet. Sie können jede Ecke unabhängig mit ein bis vier Werten festlegen.
Wie erstelle ich einen perfekten Kreis mit border-radius?
Setzen Sie border-radius auf 50% bei einem quadratischen Element (gleiche Breite und Höhe). Für eine Ellipse verwenden Sie border-radius: 50% bei einem rechteckigen Element.
Welche Einheiten kann ich für border-radius verwenden?
Border-radius akzeptiert px, %, em, rem, vw, vh und andere CSS-Längeneinheiten. Prozentsätze sind relativ zu den Abmessungen des Elements.
Was ist die Kurzschreibweise für border-radius?
Die Kurzschreibweise folgt dem Muster: oben-links oben-rechts unten-rechts unten-links. Ein Wert gilt für alle Ecken. Zwei Werte setzen oben-links/unten-rechts und oben-rechts/unten-links.
Kann ich elliptische Ecken erstellen?
Ja, mit der Schrägstrich (/)-Syntax können Sie separate horizontale und vertikale Radien definieren. Zum Beispiel erstellt border-radius: 50% / 100px eine elliptische Kurve.
Funktioniert border-radius bei allen Elementen?
Border-radius funktioniert bei den meisten HTML-Elementen einschließlich div, button, img und input. Ohne overflow: hidden wird überlaufender Inhalt möglicherweise nicht abgeschnitten.
Kann ich komplexe Formen mit border-radius erstellen?
Ja, durch Kombination verschiedener Radiuswerte für jede Ecke können Sie Pillen, Ovale, Blätter und benutzerdefinierte organische Formen erstellen.
Wird border-radius in allen Browsern unterstützt?
Ja, border-radius wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari, Edge und mobiler Browser.
Wie erstelle ich einen pillenförmigen Button?
Setzen Sie border-radius auf einen Wert gleich oder größer als die Hälfte der Elementhöhe. Für einen 40px hohen Button verwenden Sie border-radius: 20px oder höher.
Beeinflusst border-radius Hintergrundbilder?
Ja, border-radius beschneidet den Hintergrund, das Hintergrundbild und den Rahmen eines Elements. Der Hintergrund folgt automatisch den abgerundeten Ecken.
Kann ich border-radius animieren?
Ja, border-radius ist mit CSS-Übergängen und Animationen animierbar. Sie können sanft zwischen verschiedenen Radiuswerten übergehen.
Kann ich border-radius mit CSS-Transformationen verwenden?
Ja, border-radius funktioniert gut mit CSS-Transformationen wie rotate, scale und translate.
Wie erstelle ich einen Kreis mit Rahmen?
Wenden Sie border-radius: 50% auf ein quadratisches Element mit gleicher Breite und Höhe an und fügen Sie eine border-Eigenschaft hinzu.
Was ist der Unterschied zwischen einzelnen Eck-Eigenschaften und der Kurzschreibweise?
Einzelne Eigenschaften wie border-top-left-radius geben Ihnen präzise Kontrolle über jede Ecke. Die Kurzschreibweise ermöglicht das Setzen mehrerer Ecken in einer Deklaration.