jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-Border-Radius-Builder

Setze abgerundete Ecken einzeln und generiere die border-radius CSS-Deklaration.

Tool wird geladen...

Was ist CSS-Border-Radius-Builder?

border-radius steuert, wie stark jede Ecke eines Elements abgerundet wird, aber die vierwertige Kurzschreibweise und die achtwertige elliptische Syntax konnen verwirrend sein. Dieses Tool macht die Eigenschaften visuell, indem es Ihnen ermoglicht, jede Ecke unabhangig einzustellen und zwischen px-, rem- und Prozent-Einheiten zu wahlen, sodass Sie den Effekt sehen konnen, bevor Sie die CSS-Deklaration schreiben.

Kurze Antwort

Runden Sie die Ecken jedes Elements ab, indem Sie jede Ecke unabhangig anpassen oder einen einheitlichen Wert verwenden. Wahlen Sie zwischen px-, rem- und Prozent-Einheiten und sehen Sie eine Live-Vorschau des Ergebnisses.

Last updated: 2026-06-11

Einschränkungen

  • Das Tool zeigt einheitliche und einzelne Eckenradiuswerte. Es unterstutzt nicht die elliptische Syntax, die einen Schragstrich verwendet, um separate horizontale und vertikale Radien pro Ecke zu setzen.
  • Prozentuale border-radius-Werte sind relativ zu den Elementabmessungen und konnen bei Elementen mit dynamischer GroBenanpassung unerwartete elliptische Ecken erzeugen.
  • Abgerundete Ecken beschneiden standardmaBig keinen Kind-Inhalt. Wenn ein Kind-Element einen Hintergrund oder Rahmen hat, der uber die abgerundeten Ecken hinausragt, fugen Sie overflow: hidden zum Eltern-Element hinzu, um das Beschneiden an der abgerundeten Grenze zu erzwingen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Setzen Sie einen Radiuswert fur jede Ecke einzeln oder aktivieren Sie den einheitlichen Modus, um einen Wert uberall anzuwenden.
  2. Wahlen Sie die gewunschte Einheit: px, rem oder Prozent.
  3. Beobachten Sie, wie sich die Live-Vorschau bei jeder Eckenanpassung aktualisiert.
  4. Kopieren Sie die generierte CSS-Deklaration in Ihr Stylesheet.

Wofür du es nutzen kannst

  • Pillenformige Schaltflachen erstellen, indem border-radius groBer als die Schaltflachenhohe gesetzt wird.
  • Kreisrunde Avatare und Profilbilder mit border-radius: 50% erstellen.
  • Kartenecken mit subtiler Abrundung an den oberen Ecken und scharfen unteren Ecken gestalten.

Anwendungsfalle

Praxisbeispiele

Beispiel

Pillenschaltflache mit groBem Radius

Eine Call-to-Action-Schaltflache benotigt eine vollstandig abgerundete Pillenform. Das Setzen von border-radius auf 999px bei einer kurzen Schaltflache erzeugt unabhangig von der Schaltflachenbreite abgerundete Enden.

Beispiel

Karte mit subtiler Eckenabrundung

Eine Inhaltskarte verwendet 8px Abrundung an allen Ecken. Der einheitliche Modus wendet denselben Wert uberall an und erzeugt ein weiches, aber professionelles Erscheinungsbild.

Haufige Fehler

  • px bei Elementen zu verwenden, die mit der SchriftgroBe skalieren sollten, wodurch verhindert wird, dass sich der Eckenradius bei TextgroBenanderung anpasst.
  • Die Schragstrich-Syntax fur elliptische Ecken zu vergessen, die separate horizontale und vertikale Radien fur fortgeschrittene Formen setzt.
  • Einen Radius groBer als die Halfte der ElementgroBe zu setzen, was dazu fuhren kann, dass sich die Ecken uberlappen und unerwartete Ergebnisse erzeugen.

Überprüfung

  1. Testen Sie den generierten border-radius auf dem Ziel-Element bei verschiedenen GroBen und Bildschirmbreiten, um zu bestatigen, dass die Eckenproportionen konsistent bleiben.
  2. Uberprufen Sie das Element in den Entwicklertools, um zu bestatigen, dass die berechneten border-radius-Werte mit der Deklaration ubereinstimmen.

FAQ

Fragen zu CSS-Border-Radius-Builder

Wie mache ich einen perfekten Kreis?

Setzen Sie border-radius auf 50% bei einem quadratischen Element. Dies erzeugt einen perfekten Kreis, da jede Ecke auf die Halfte der Elementbreite und -hohe abgerundet wird.

Welche Einheit sollte ich fur border-radius verwenden?

Verwenden Sie rem fur Radien, die mit der Basis-SchriftgroBe skalieren sollen, und px fur feste dekorative Elemente. Verwenden Sie Prozent fur kreisrunde Formen und flieBende Abrundungen.

Wie mache ich eine perfekte Pillenform?

Setzen Sie border-radius auf einen Wert groBer als die Elementhohe, wie 999px, bei einer rechteckigen Schaltflache oder einem Badge. Der Browser rendert unabhangig von der Elementbreite vollstandig abgerundete Enden und erzeugt eine Pillenform.

Kann ich Prozentwerte fur border-radius verwenden?

Ja, aber Prozentwerte beziehen sich auf die Elementabmessungen. Ein Wert von 50% auf einem quadratischen Element erzeugt einen perfekten Kreis. Bei einem Rechteck erzeugt 50% eine elliptische Form, da der Prozentsatz sowohl auf Breite als auch Hohe unabhangig angewendet wird.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren