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.
So verwenden Sie CSS Border Radius Generator
Gestalten Sie abgerundete Ecken visuell mit diesem CSS-border-radius-Generator. Alles läuft lokal in Ihrem Browser, und es werden keine Daten hochgeladen.
- Wählen Sie im Dropdown Unit px, %, em oder rem.
- Ziehen Sie die Regler Top Left, Top Right, Bottom Right und Bottom Left, um jede Ecke einzeln abzurunden.
- Aktivieren Sie Link all corners, um alle vier Ecken auf einen gemeinsamen Wert zu setzen.
- Kopieren Sie den erzeugten CSS-Code aus der Vorschau und fügen Sie ihn in Ihr Stylesheet ein.
50 % an allen vier Ecken ergibt einen perfekten Kreis oder eine Pille; mit em oder rem skaliert der Radius mit Ihrer Typografie.
Verwandte Tools
- CSS Box Shadow Generator Kostenloser Online-CSS-Box-Shadow-Generator. Erstellen Sie visuell schöne Schatten mit einstellbarem Versatz, Unschärfe, Ausbreitung, Farbe und Inset. Live-Vorschau und sofortiges Code-Kopieren.
- CSS-Gradient-Generator Erstellen Sie visuell atemberaubende CSS-Gradienten. Generieren Sie lineare, radiale und konische Gradienten mit mehreren Farbstops, Winkeln und Positionen. Kopieren Sie produktionsreifen CSS-Code sofort.
- CSS Grid Generator Kostenloser visueller CSS Grid Generator mit Live-Vorschau. Gestalten Sie responsive Grid-Layouts interaktiv und exportieren Sie produktionsreifen CSS-Code.
- CSS Flexbox-Generator Visueller CSS Flexbox-Generator mit Live-Vorschau. Passen Sie Flex-Eigenschaften an und erhalten Sie sofort einsatzbereiten CSS-Code.
- Border Radius Generator Kostenloser Online Border-Radius-Generator. Ziehen Sie 8 Griffe oder wählen Sie eine Blob-Vorlage, um organische CSS-Formen zu erstellen und den Code sofort zu kopieren.
- Farbkonverter Kostenloser Online-Farbkonverter. Konvertieren Sie HEX, RGB, HSL, HSV Formate sofort mit visueller Farbauswahl. 100% privat, läuft in Ihrem Browser.
- CSS Easing Generator Kostenloser Online-CSS-Easing-Generator. Ziehen Sie die cubic-bezier-Kontrollpunkte auf einer interaktiven Kurve, wählen Sie aus 18 Vorlagen, sehen Sie eine Ball-Loop-Animation und kopieren Sie die Timing-Funktion sofort.
- CSS Text-Shadow-Generator Kostenloser Online-Text-Shadow-Generator. Stapeln Sie mehrere Schattenebenen mit Versatz, Unschärfe, Farbe und Deckkraft, testen Sie Vorlagen wie Neon, 3D oder Retro und kopieren Sie das CSS sofort.