Border Radius Previewer
Visually edit CSS border-radius with sliders, presets, and a live preview — copy the CSS with one click
border-radius: 20px;Border Radius Previewer
Visually edit CSS border-radius with sliders, presets, and a live preview — copy the CSS with one click
Features
- Live preview of `border-radius` with per-corner controls (TL / TR / BR / BL)
- Eight named presets (rounded, pill, leaf, blob, ticket, etc.)
- Output as CSS shorthand: `border-radius: 10px 20px 5px 15px;` or single value if all corners match
- Elliptical corners (the slash syntax `40px / 20px`) are not directly editable in this UI — set all four corners equal for symmetric output
- Copy the CSS line to clipboard with one click
How to use
- Drag the sliders to adjust each corner.
- Or click a preset for quick shapes.
- Copy the generated CSS property.
Tips & Best Practices
- Single value (e.g. `border-radius: 8px`) applies to all four corners — the most common case.
- Four-value shorthand goes TL / TR / BR / BL (clockwise from top-left).
- Elliptical corners (`Xpx Ypx / Xpx Ypx`) give a "leaf" or asymmetric shape — supported in CSS but not exposed in this UI.
- For animated radius changes, transition `border-radius` directly — the property is animatable.
- Mobile / iOS Safari: corner radius up to ~50% of the smaller side renders as a perfect circle (`border-radius: 50%`).
FAQ
What is border-radius?
CSS border-radius rounds the corners of an element. You can set all corners equally or control each independently using the four-value or eight-value shorthand to create elliptical corners.
When should I use % vs px?
Use px for fixed rounding that stays consistent regardless of element size — ideal for buttons and cards. Use % for shapes relative to the element size — 50% creates a circle on a square element and adapts to responsive layouts.
How do I create elliptical corners?
Use the slash syntax in border-radius (e.g., border-radius: 50px / 25px) where the first value is the horizontal radius and the second is the vertical radius. This creates an elliptical curve instead of a perfect circular arc, useful for organic blob and leaf shapes.
Why does my border-radius not appear on a child element?
By default, child elements (especially images and inputs) can overflow rounded corners. Add overflow: hidden to the parent, or apply the same border-radius directly to the child to clip it correctly.
Can I animate border-radius with CSS transitions?
Yes, border-radius is animatable via CSS transitions and keyframes. Combining different radius values per corner creates morphing blob effects — try transitioning from a circle (50%) to an organic shape with mismatched corner values.
Does border-radius affect the outline or box-shadow?
Box-shadow follows the rounded corners automatically, but the outline property does not respect border-radius in older browsers. Modern browsers (2022+) now support rounded outlines, but for broader compatibility use box-shadow with a spread value to mimic an outline.
Is everything processed in my browser?
Yes, the border-radius previewer runs entirely client-side. Your colors, dimensions, and CSS values never leave your device — nothing is uploaded to a server.