Border Radius Generator — Fancy Corners and CSS Blob Shapes
Fine-tune per-corner border radii or sculpt organic blob shapes with this free online border-radius generator. It exposes the full 8-value border-radius syntax — separate horizontal and vertical radii per corner — that turns plain rectangles into smooth, organic forms, with a live preview and one-click CSS copy.
Most developers only ever use the single-value shorthand, but border-radius accepts up to eight values that unlock expressive, fluid shapes for avatars, cards, buttons, and decorative elements — no images or SVG masks required. Drag the handles, watch the shape morph, copy the code.
How to Create a Custom Border Radius
-
Choose simple or advanced mode
Set a uniform radius per corner, or unlock the 8-value syntax for organic blob shapes.
-
Drag and adjust
Manipulate each corner's horizontal and vertical radius with instant visual feedback.
-
Preview on a real element
See the shape applied live so you know exactly how it renders in production.
-
Copy the CSS
One click copies the full border-radius rule — including the slash syntax — to your clipboard.
Features of the Border Radius Generator
-
Full 8-value syntax
Control horizontal and vertical radii independently for each corner using the slash notation.
-
Organic blob mode
Generate smooth, asymmetric shapes perfect for portraits, feature highlights, and playful UI.
-
Live morphing preview
The element reshapes in real time as you drag — design entirely by eye.
-
Per-corner precision
Round just one or two corners for tabs, speech bubbles, and asymmetric cards.
-
Instant CSS copy
Valid, minimal border-radius code ready for any stylesheet or framework.
Frequently Asked Questions
How does the 8-value border-radius syntax work?
border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 sets the horizontal radii before the slash and the vertical radii after, one pair per corner starting top-left. Different horizontal and vertical values per corner is what creates fluid, organic curves.
How do I make a blob shape with pure CSS?
Use asymmetric 8-value border-radius — for example border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. This generator lets you sculpt the shape visually instead of guessing percentages.
Should I use percentages or pixels for border-radius?
Percentages scale with the element (50% on a square makes a circle) and suit blobs and avatars. Pixels give consistent corner rounding regardless of element size and suit buttons, inputs, and cards.
Can I animate between blob shapes?
Yes — border-radius is animatable. Transition between two 8-value radii on hover, or use @keyframes cycling several shapes for a continuously morphing blob.