Design
Top No-Code Design Mistakes to Avoid
Common design pitfalls that undermine your website and how to avoid them.
html-css-generators
Free CSS Border Radius Generator - Presets, Fancy Mode & Drag Handles
Create CSS border-radius visually. Standard corners or fancy 8-point elliptical shapes, drag handles on the preview, 15+ shape presets, and instant CSS output — no coding needed.
100% Free
Privacy Focused
Instant Results
Works Everywhere
Border Radius Generator
Create CSS border-radius visually with shape presets, fancy 8-point elliptical mode, drag handles on preview, box/canvas colors, and smart shorthand output.
Presets
↖ Top Left
↗ Top Right
↙ Bottom Left
↘ Bottom Right
Set independent horizontal (H) and vertical (V) radii per corner to create organic blob and leaf shapes.
↖ Top Left
↗ Top Right
↙ Bottom Left
↘ Bottom Right
Preview Settings
CSS Output
About This Tool
What is Border Radius Generator?
Our CSS Border Radius Generator is the most comprehensive border-radius tool online. Whether you need a simple rounded button or a complex organic blob for a hero section illustration, everything is handled from a single visual interface.
Start with a preset — choose from shapes like Pill, Circle, Card, Squircle, Tab, or Flag in Standard mode, or Blob, Leaf, Egg, Wave, and Organic in Fancy mode. Each preset applies instantly so you have a real starting point rather than staring at zero-value sliders.
In Standard mode, adjust each of the four corners individually using paired sliders and number inputs. Toggle Uniform mode to lock all corners together for fast symmetrical rounding. Switch to Fancy 8-Point mode to unlock independent horizontal and vertical control per corner — eight values in total. This is what enables true elliptical corners and organic, amoeba-like blob shapes using the CSS slash notation (H H H H / V V V V).
The interactive preview box has drag handles on each corner. Click and drag any handle directly on the box to adjust that corner visually, exactly like working in a design tool. Box size controls let you set width and height from 5px to any value you need, and color pickers let you match your actual brand color and canvas background so the preview reflects your design context.
Units switch between px, %, and em. Number inputs accept any value freely; sliders track within a practical visual range. The CSS output is always the most compact valid shorthand — collapsed to one value when all corners match, or expanded to four values when they differ. For fancy shapes, the full elliptical slash notation is generated automatically.
All processing runs 100% in the browser. No data leaves your device, and the tool works offline once the page has loaded.
Features
Powerful Features
Everything you need in one amazing tool
Shape Presets
One-click presets for common shapes: Circle, Pill, Card, Squircle, Blob, Leaf, Egg, Wave, and more across both Standard and Fancy modes
Fancy 8-Point Mode
Control horizontal and vertical radius independently for each corner, creating organic blob and elliptical shapes impossible with basic sliders
Drag Handles on Preview
Drag circular handles directly on the preview box to adjust corners visually — no need to hunt for the right slider
Independent Corner Control
Adjust all four corners separately in Standard mode, or link them together with the uniform toggle for instant symmetrical rounding
Canvas & Box Colors
Set both the preview box color and canvas background to see your shape exactly as it will appear in your real design context
Smart CSS Output
Generates optimized shorthand (border-radius: 10px) for simple cases and full 8-point elliptical notation (H H H H / V V V V) for fancy shapes
Simple Process
How It Works
Get started in 4 easy steps
1
Pick a Preset or Start Fresh
Choose from presets like Pill, Circle, Squircle, or Blob to start with a ready-made shape — or jump straight to the sliders
2
Adjust Corners
In Standard mode, drag sliders or type values for each corner. Switch to Fancy mode to control horizontal and vertical radius per corner independently for organic shapes
3
Drag & Fine-Tune
Drag the handles on the preview box for a tactile experience. Use the box size and color controls to simulate your exact design environment
4
Copy CSS
Click Copy to grab the generated CSS — compact shorthand for simple shapes, or full elliptical slash notation for fancy blob shapes
Why Us
Why Choose Our Border Radius Generator?
Stand out from the competition
Full elliptical corner control (H/V per corner) lets you create shapes that standard 4-slider tools cannot produce
Interact with the preview box directly for a natural, design-tool-like experience instead of hunting through sliders
15+ presets spanning Standard (Pill, Circle, Card, Squircle) and Fancy (Blob, Leaf, Egg, Wave, Organic) modes for instant starting points
Set your brand color and canvas background so the preview reflects your actual design — not a generic white box
Work in px, %, or em. Number inputs accept any value freely; sliders give quick visual feedback within a practical range
100% client-side — all processing happens in your browser with no data sent to any server
Use Cases
Perfect For
See how others are using this tool
Buttons & Cards
Apply precise border-radius to buttons, cards, modals, and input fields for a consistent, modern UI design system
Circular Avatars
Use 50% on a square container for a perfect circle — ideal for profile images, icon badges, and avatar components
Pill Navigation & Tags
Large corner values (e.g., 9999px) create pill-shaped tags, chips, and nav items common in modern web apps
Organic Blob Illustrations
Use Fancy mode to generate blob and organic shapes for hero illustrations, decorative backgrounds, and brand elements
Mobile App UI
Match iOS and Material Design rounding conventions with pixel-accurate values for smooth, platform-appropriate components
Brand Identity Elements
Design unique logo containers, feature cards, and section dividers with asymmetric corner combinations that reinforce brand identity
Frequently Asked Questions
Everything you need to know about Border Radius Generator
Standard mode controls a single radius value per corner — four values total. Fancy 8-Point mode lets you set separate horizontal and vertical radii for each corner — eight values total. This unlocks elliptical corners and organic, blob-like shapes. The CSS output uses slash notation: border-radius: H H H H / V V V V. Use Standard mode for buttons, cards, and common UI shapes; use Fancy mode for creative shapes, hero illustrations, and decorative elements.
Each corner of the preview box has a circular drag handle. Click and drag any handle to adjust that corner's radius visually. In Standard mode, dragging updates the corner's single value. In Fancy mode, dragging adjusts the horizontal radius for that corner. The sliders and number inputs stay in sync so you can switch between dragging and typing at any time. Handles use the Pointer Events API and work on both mouse and touch devices.
Pixel (px) values specify an absolute radius regardless of the element's size — 10px always rounds by exactly 10 pixels. Percentage (%) values are relative to element dimensions — 50% on a 200×200px square creates a 100px radius, forming a circle. Use px for consistent rounding on elements that vary in size (buttons, inputs), and % when rounding should scale with the element — most commonly 50% for circles and 9999px for pills.
Your element must have equal width and height. Apply border-radius: 50% and the four arcs meet in the center to form a circle. In this tool, select the Circle preset in Standard mode — it applies 50% automatically. Set the preview width and height to equal values using the box size controls to confirm the circle shape in the preview.
The tool follows CSS shorthand rules automatically. All corners equal → one value. Opposite pairs match → two values. Only bottom-right differs → three values. All different → four values (clockwise from top-left). You get the most compact valid CSS without having to work out the rules yourself.
Tables default to border-collapse: collapse, which prevents border-radius from rendering. Fix it by adding border-collapse: separate; border-spacing: 0; to the table element. A simpler alternative is to wrap the table in a div, apply border-radius and overflow: hidden to the wrapper — this clips the table to the rounded shape without modifying table styles at all.
Need a Custom Website Built?
While you use our free tools, let us build your professional website. Fast, affordable, and hassle-free.
Free forever plan
• No credit card required