Border Radius Generator
Design Tools
Design custom rounded corners with per-corner control, elliptical radii, and ready-made presets for squircles, pills, blobs, and cards.
Runs entirely in your browserAbout Border Radius Generator
`border-radius` is more powerful than most CSS authors use. Beyond the standard `border-radius: 12px`, CSS lets you set each of the four corners independently, and within each corner you can give horizontal and vertical radii separately to produce elliptical curves. The Border Radius Generator surfaces all of this with visual sliders.
Use the four corner sliders for asymmetric shapes — perfect for blob backgrounds, irregular cards, or speech bubbles. Toggle elliptical mode to get separate horizontal and vertical radii per corner (the CSS syntax with `/` between two value lists). Pick a preset (squircle, pill, card, blob) to start from a known good shape. The live preview shows your shape in a generous size with a gradient fill so you can spot subtle curve differences. Output is plain CSS in px, %, or rem.
How to use
- 1
Try a preset
Pick squircle, pill, card, or blob from the preset buttons as a starting point.
- 2
Choose your unit
Pick px, %, or rem from the Unit dropdown. Percentages create proportional curves.
- 3
Adjust the four corners
Use the sliders for top-left, top-right, bottom-right, and bottom-left. Set them equal for a symmetric shape; mix them up for asymmetric blobs.
- 4
(Optional) Toggle elliptical corners
Enable elliptical mode for separate horizontal and vertical radii per corner. The output uses CSS's `R1 R2 R3 R4 / V1 V2 V3 V4` syntax.
- 5
Copy the CSS
Use the Copy button on the CSS panel.
Examples
Pill button
Equal large radius on all corners — exceeds element size, so the shape fully rounds.
Output
border-radius: 9999px;Asymmetric blob
Mixed corner values produce organic, hand-drawn-feeling shapes.
Output
border-radius: 60px 30px 60px 30px;Elliptical corners
Separate horizontal and vertical radii give stretched-out curves.
Output
border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;Frequently asked questions
What's a squircle?+
A shape between a square and a circle — corners rounded enough to feel friendly without becoming a full pill. iOS app icons are squircles. A `border-radius` around 22–28% of the element's smaller dimension is in squircle territory.
What does the elliptical mode do?+
Standard `border-radius` gives circular corners (same horizontal and vertical radius). Elliptical mode lets each corner have separate horizontal and vertical radii, producing stretched-out, elliptical curves — useful for organic blob shapes.
When should I use px vs %?+
Use px for consistent shape regardless of element size (a button stays the same shape whether it's 100px or 300px wide). Use % for proportional curves — a circular shape, for example, is `border-radius: 50%`.
Why does my pill button not become fully round?+
If the radius is smaller than half the element's smaller dimension, you'll get a less-than-pill shape. Use a large value (e.g. 9999px) that's guaranteed to exceed half the element size.
Can I animate border-radius?+
Yes — it's a fully animatable property. Use it in transitions or keyframes for shape-morphing effects.
Related tools
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview.
Box Shadow Generator
Build multi-layer CSS box-shadow styles with offset, blur, and spread controls.
Flexbox Playground
Experiment with Flexbox container and item properties visually.
Color Palette Generator
Generate color palettes from a base color using complementary, triad, and other schemes.
CSS Formatter
Format and organize CSS automatically with configurable brace and indent styles.