Border Radius Generator
Generate CSS border-radius values with a visual corner-by-corner editor. Create rounded, pill-shaped, and organic shapes.
border-radius: 8px;How to Use
- Adjust each corner independently using the four corner sliders (top-left, top-right, bottom-right, bottom-left). Or use the master slider to set all four corners uniformly. The preview shape updates in real time.
- Fine-tune asymmetric radii — each corner can have separate horizontal and vertical radius values using the 8-value syntax (e.g., `border-radius: 30px 20px 50px 10px / 20px 40px 10px 30px`). This lets you create organic, blob-like shapes beyond simple rounded rectangles.
- Copy the generated CSS `border-radius` declaration. Choose between the shorthand syntax (1-4 values), the 8-value elliptical syntax for advanced shapes, or individual `border-*-*-radius` properties for maximum control in your stylesheet.
Frequently Asked Questions
- What's the difference between the 4-value and 8-value syntax?
- The 4-value syntax `border-radius: 10px 20px 30px 40px` sets uniform radii per corner (clockwise from top-left). The 8-value syntax `border-radius: a b c d / e f g h` sets separate horizontal (before slash) and vertical (after slash) radii per corner, enabling elliptical curves that aren't perfectly circular.
- How do I make a perfect circle or pill shape?
- For a perfect circle, set `border-radius: 50%` on a square element. For a pill/capsule shape, set `border-radius: 9999px` (or any value larger than half the element's height) — this forces the ends to be fully rounded regardless of content width. The generator's 'Pill' preset does this automatically.
- Can border-radius clip my content?
- Yes — `border-radius` clips both the background and the content inside the element. If you have child elements with sharp corners inside a rounded parent, use `overflow: hidden` on the parent to ensure clean clipping. The generator preview includes a content area so you can verify the clipping behavior.