Visually customize CSS border-radius with independent corner control. Live preview and copy CSS instantly.
The CSS border-radius property is one of the most frequently used styling properties in web design — it rounds the corners of elements, transforming rectangles into pills, circles, and organic shapes. While setting all corners equally is simple (border-radius: 12px), CSS allows independent control of all four corners using separate values (top-left, top-right, bottom-right, bottom-left) and even elliptical radii (horizontal/vertical). Complex shapes like speech bubbles, squircles, and leaf shapes can all be created with border-radius alone. This live preview tool eliminates guesswork — drag the sliders, see the shape, grab the CSS. No more trial-and-error in your browser's DevTools.
Shorthand: border-radius: [top-left] [top-right] [bottom-right] [bottom-left]. A single value applies to all corners. Two values set top-left/bottom-right and top-right/bottom-left. Use 50% to create a circle (on equal-width/height elements).
Set border-radius: 50% on an element with equal width and height. For example: width: 100px; height: 100px; border-radius: 50% creates a circle.
CSS supports the / syntax: border-radius: 40px / 20px sets horizontal and vertical radii independently, creating elliptical corners instead of circular ones. This enables organic, blob-like shapes.
No — border-radius is purely visual. The clickable area (and layout box) remains rectangular regardless of how rounded the corners appear.
Yes! CSS transitions and animations work on border-radius. You can smoothly morph shapes with transition: border-radius 0.3s ease.