Fancy Border Radius Generator
Free online fancy border radius generator. Drag 8 handles or pick a blob preset to create organic CSS shapes and copy the border-radius code instantly.
What does the 8-value border-radius syntax mean?
In the syntax border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, the values before the slash are the horizontal radii (top-left, top-right, bottom-right, bottom-left) and the values after it are the vertical radii. Using different values in each direction is what creates organic blob shapes.
How do I use the generated CSS?
Copy the border-radius line and paste it into any CSS rule for the element you want to shape, for example .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. It works in plain CSS, Sass, Tailwind arbitrary values and inline styles.
Where are blob shapes commonly used?
Blob shapes are popular for hero illustrations, avatars, profile pictures, feature cards, buttons and decorative backgrounds in modern web and app design.
Do rounded corners work in all browsers?
Yes. border-radius is supported by every modern browser, including Chrome, Firefox, Safari, Edge and mobile browsers, and no vendor prefixes are needed.
Can I animate the blob shape?
Yes. border-radius is an animatable property, so adding a CSS transition lets you morph smoothly between shapes, for example .blob { transition: border-radius .8s ease; }.
What is the difference between the 4-value and 8-value syntax?
The 4-value form sets the horizontal and vertical radius of each corner to the same value, which is enough for pills or circles. The 8-value form separates the horizontal and vertical radii, which is what allows asymmetric, organic shapes.
How do I create a perfect circle?
Set all eight values to 50% on a square element, or simply use border-radius: 50%. You can also start from a preset close to a circle and fine-tune from there.
Is my data uploaded anywhere?
No. The generator runs entirely in your browser with pure CSS and JavaScript. Nothing you drag, type or copy is ever sent to a server.
Can I use this on non-square elements?
Yes, but percentage radii are relative to the element dimensions, so a rectangle will produce elliptical corners and look different from the square preview. Use the generated values as a starting point and adjust.
How to Use Fancy Border Radius Generator
The eight-value border-radius produces organic blob shapes with elliptical corners that plain rounded rectangles cannot match. Sculpt the shape with drag handles and copy the finished CSS — everything renders live in your browser.
- Grab any of the eight handles sitting on the shape's edges — the ones on the top and bottom edges set the horizontal radii, the ones on the left and right edges set the vertical radii.
- Click one of the six preset squares to start from a designed blob, then fine-tune the values in the Horizontal radii and Vertical radii number inputs (one per corner, 0–100%).
- Press Random to roll a fresh organic shape in one click, or Reset to go back to the default shape and colors.
- Pick a Shape color and a Background color to preview the blob against your target palette — both update instantly.
- Press Copy CSS to grab the live border-radius declaration shown in the bar at the bottom and paste it onto any element.
Apply the code to a square element with overflow: hidden for the classic blob look; percentages keep the curve fluid at any size, and the slash in the syntax separates horizontal from vertical radii.
Related Tools
- CSS Border Radius Generator Visual CSS border-radius generator. Adjust each corner independently with real-time preview and copy the generated CSS code instantly.
- CSS Gradient Generator Create stunning CSS gradients visually. Generate linear, radial & conic gradients with multiple color stops, custom angles and positions. Copy production-ready code instantly.
- CSS Box Shadow Generator Free online CSS box-shadow generator. Visually create beautiful shadows with adjustable offset, blur, spread, color and inset. Live preview and instant code copy.
- Color Palette Generator Create beautiful, harmonious color palettes instantly with our free online generator. Supports monochromatic, analogous, complementary, triadic, split-complementary, and tetradic modes. Fine-tune colors with HSL sliders, lock favorites, and export as CSS variables, Tailwind config, JSON, or SVG. 100% browser-based, your data never leaves your device.
- Color Converter Free online color converter. Convert HEX, RGB, HSL, HSV formats instantly with visual picker. 100% private, runs in your browser.
- CSS Easing Generator Free online CSS easing generator. Drag the cubic-bezier control points on an interactive curve, choose from 18 presets, watch a looping ball preview and copy the timing function instantly.
- Text Shadow Generator Free online text-shadow generator. Stack multiple shadow layers with offset, blur, color and opacity, try Neon, 3D, Retro and Glow presets, and copy the CSS instantly.
- CSS Clip Path Generator Free online CSS clip-path generator. Design polygon, circle, ellipse and inset shapes with draggable points, live preview and one-click CSS code copy.