CSS-Border-Radius-Generator
Erstellen Sie komplexe border-radius-Werte in CSS auf visuelle Weise. Unabhängige Steuerung jeder Ecke.
border-radius: 20px 20px 20px 20px;
So verwenden Sie dieses Tool
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
Was ist der CSS-Border-Radius-Generator?
Die CSS-Eigenschaft border-radius akzeptiert bis zu vier Werte, einen pro Ecke, in der Reihenfolge oben links, oben rechts, unten rechts und unten links. Kombinieren Sie unterschiedliche Radien für organische tropfenförmige Formen, asymmetrische Karten oder Sprechblasen-Stile. Mit diesem Tool stellen Sie jede Ecke per Schieberegler ein und sehen das Ergebnis in Echtzeit.
Häufige Anwendungsfälle
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Häufig gestellte Fragen
Was ist mit elliptischen Radien?▼
Verwandte Tools
Farbkonverter (HEX/RGB/HSL)
Wandeln Sie Farben zwischen den Formaten HEX, RGB und HSL um. Wählen Sie eine Farbe visuell aus oder geben Sie die Werte manuell ein.
CSS-Box-Shadow-Generator
Erstellen Sie box-shadow-Werte in CSS auf visuelle Weise. Vorschau in Echtzeit und Kopieren des generierten CSS.
CSS-Verlaufsgenerator
Erstellen Sie lineare und radiale CSS-Verläufe. Wählen Sie die Farben visuell aus und kopieren Sie das generierte CSS.
Cubic-Bezier-Easing-Kurven-Generator
Erstellen Sie cubic-bezier-Easing-Kurven für CSS. Inklusive standardmäßiger Voreinstellungen.
Farbpaletten-Generator
Erzeugen Sie harmonische Farbpaletten aus jeder beliebigen Grundfarbe. Unterstützt komplementäre, analoge, triadische und monochromatische Schemata.
CSS-clamp()-Generator
Erzeugen Sie fluide, responsive CSS-Werte mit clamp(). Skaliert gleichmäßig zwischen Mindest- und Höchstgrößen über die Viewport-Bereiche hinweg.