CalcChef
Search tools (e.g. 'calc', 'converter')... (Press '/' or 'Cmd+K')

CSS Border Radius Generator

Visually sculpt rounded corners for your elements. Create circles, pills, and organic shapes with advanced individual corner control.

Loading Tool...

Round Your Corners Perfectly

Square corners are so 2010! Our CSS Border Radius Generator lets you visually sculpt rounded corners on any element. Create pill buttons, circular avatars, or trendy "blob" shapes with individual corner control. Drag the sliders, see the preview, copy the CSS—it's that easy. Perfect for modernizing UI components without guessing pixel values!

Advanced Corner Control

The border-radius property can handle up to 8 values—horizontal and vertical radii for each of 4 corners! This generator exposes that power visually. Create asymmetric organic shapes, speech bubble tails, or perfectly uniform rounded rectangles. Use 50% to turn squares into circles instantly. The modern web is all about soft edges!

Design Trend: Apple pioneered "squircles" (superellipse curves) on iOS icons—mathematically smoother than simple border-radius. CSS can't quite do true squircles, but high border-radius values get close!

Related Tools

View all tools
CSS

CSS Box Shadow Generator

Generate complex CSS box-shadows visually. Adjust position, blur, spread, and color to create depth and elevation for your UI elements.

CSS

CSS Text Shadow Generator

Create stylish text shadows instantly. Add glow, outline, or 3D effects to your typography with fully customizable CSS properties.

CSS

CSS Gradient Generator

Design beautiful linear and radial gradients for backgrounds. Customize colors, angles, and stops to generate cross-browser compatible CSS.

CSS

CSS Transform Generator

Visualize CSS 2D and 3D transforms including translate, rotate, scale, skew, rotateX/Y/Z, and perspective. Generate cross-browser compatible CSS with multiple export formats.

CSS

CSS Filter Generator

Apply CSS image filters like blur, brightness, contrast, and grayscale. Edit images directly in the browser with non-destructive effects.

CSS

CSS Flexbox Generator

Generate CSS Flexbox layouts visually. Align items, distribute space, and manage responsive behavior with the Flexible Box Module.