Border Radius Generator
Visually craft CSS border-radius values — including the 8-value slash syntax for organic blob shapes
Corner settings
Live preview
CSS
.element {
border-radius: 16px;
}Examples
Pill button
border-radius: 9999px;Setting an extremely large radius on all corners produces a fully rounded pill shape that adapts to any element size.
Organic blob
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;The slash syntax lets each corner have a different horizontal and vertical radius, creating the fluid, amoeba-like shapes popular in modern UI design.
Details
The CSS border-radius property accepts up to eight values using the slash syntax (a b c d / e f g h) that controls horizontal and vertical radii independently for each corner — unlocking organic blob shapes and asymmetric curves. This generator lets you dial in all four corners with sliders in px or %, toggle advanced mode for separate horizontal/vertical radii, see the shape update in real time, and copy the finished CSS rule. Everything runs locally in your browser.
About this tool
The Border Radius Generator lets you visually design CSS border-radius values for any element — from simple rounded corners to complex organic blob shapes — without memorising syntax. Four corner sliders control the radius in px or %, and a live preview box updates instantly as you drag.
Enable Advanced mode to unlock the eight-value slash syntax (border-radius: a b c d / e f g h), which sets independent horizontal and vertical radii for every corner. This is the technique behind the fluid, amoeba-like shapes widely used in modern UI design.
Everything runs locally in your browser. No shape data is sent to a server — just dial in your values, watch the preview, and copy the finished CSS rule.
How to use
Choose a preset or unit
Pick a preset chip (Rounded card, Pill, Circle, Blob) for an instant starting point, or toggle between px and % units to match your design system.
Adjust corner sliders
Drag the four corner sliders to set the radius. Enable Advanced mode to reveal separate horizontal and vertical sliders per corner, producing the slash syntax for blob shapes.
Copy the CSS
Click Copy CSS to copy the generated border-radius rule and paste it directly into your stylesheet.
border-radius syntax forms
| Syntax | When to use it |
|---|---|
| border-radius: 8px | Single value — same radius on all four corners |
| border-radius: 8px 16px 8px 16px | Four values — top-left, top-right, bottom-right, bottom-left |
| border-radius: 50% | Percentage — 50% on all corners produces a perfect ellipse |
| border-radius: a b c d / e f g h | Slash syntax — independent horizontal/vertical radii per corner for blob shapes |
Frequently asked questions
Related tools
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
Flexbox Playground
Visually configure a CSS flexbox container — set direction, alignment, wrap and gap, see a live preview, and copy production-ready CSS.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
Barcode Generator
Generate barcodes in 8 formats (CODE128, EAN13, UPC, and more) — configure line width, height, and text display, then download as SVG or PNG.
CSV to JSON Converter
Paste CSV data and convert it to pretty-printed JSON instantly — supports custom delimiters, header row toggling, and value trimming.
HTML to Markdown Converter
Paste HTML and get clean Markdown. Configurable heading style, bullet marker, and code block style — all processed locally in your browser.