CSS Border Radius Generator
Control each corner independently. Create circles, pills, blobs, and organic shapes visually.
How to Use the Border Radius Generator
- Choose a mode — Simple for uniform rounded corners, Advanced for blob shapes with 8 independent values, or Presets for common shapes.
- Adjust sliders — Drag the sliders to set the radius for each corner. You can also type a number directly.
- Change units — Switch between px and % per corner. Percentage values scale with the element's dimensions.
- Preview live — The preview box updates instantly. Resize it and change its color to see how your shape looks.
- Copy the CSS — Click Copy to grab the border-radius declaration, or Download to save as a .css file.
Understanding CSS border-radius
The border-radius property is one of CSS's most versatile tools for creating smooth, organic shapes. At its simplest, a single value rounds all four corners equally. But with individual corner control and the advanced slash syntax, you can create everything from simple rounded buttons to complex blob shapes.
Simple vs. Advanced Mode
Simple mode gives you one radius per corner, producing symmetrical ellipses at each corner. Advanced mode unlocks the CSS slash syntax — for example, border-radius: 40% 60% 70% 30% / 30% 70% 60% 40%. The values before the slash are horizontal radii and the values after are vertical radii. By mixing these values you can sculpt asymmetric, organic blob forms that are entirely CSS-based with zero images.
Common Shapes and When to Use Them
- Circle (50%) — Profile pictures, avatars, icon containers, status indicators
- Pill (999px) — Tags, badges, status chips, toggle switches, CTA buttons
- Squircle (~25%) — App icons, iOS-style containers, modern card corners
- Blob — Hero section decorations, background shapes, illustration elements
- Leaf — Decorative dividers, nature-themed UI elements, asymmetric cards
- Egg — Speech bubbles, food-themed apps, playful illustration cutouts
Performance Considerations
CSS border-radius is GPU-accelerated in all modern browsers and has no meaningful performance cost. However, very high border-radius values on elements with complex backgrounds or box-shadows can occasionally trigger paint layers. For best performance, use will-change: transform on elements that animate their border-radius. Blob shapes are far more performant than SVG clip-paths for simple shapes, since the browser computes them natively without parsing SVG.
Percentage vs. Pixel Values
When using percentage values, the horizontal radius is calculated as a percentage of the element's width, and the vertical radius as a percentage of its height. This means a 50% radius always produces a circle (on a square element) regardless of the element's actual size — it scales perfectly. Pixel values, on the other hand, remain fixed. A border-radius: 8px button looks the same at any size, which is useful for design system consistency. For responsive blobs and organic shapes, percentages are preferred.
CSS Custom Properties Integration
You can combine border-radius with CSS custom properties for theme-consistent rounding: --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px;. Many design systems (Tailwind, Material, etc.) follow this pattern. The generator outputs a ready-to-use border-radius declaration you can paste directly into your CSS or convert to a custom property. For more CSS generation, try the CSS Transform Playground or the CSS Animation Generator.
Frequently Asked Questions
width: 100px; height: 100px; border-radius: 50%; This makes all four corners round enough to form a perfect circle.40% 60% / 60% 40%) lets you set different horizontal and vertical radii per corner. The values before the slash are horizontal radii and the values after are vertical radii. This allows you to create elliptical corners and organic blob shapes.