CSS Border Radius Generator - Rounded Corners & Blob Shapes

Adjust each corner visually and copy the CSS instantly. Includes an advanced 8-value blob mode with the double-slash syntax. Free and browser-based.

Link all corners

Live preview

CSS Output

border-radius: 24px;

CSS Border Radius Generator with Blob Mode

This CSS border radius generator lets you shape rounded corners visually instead of guessing values in your stylesheet. Drag a slider for each of the four corners, link them together for uniform rounding, and watch the preview box update live. When the shape looks right, copy the generated border-radius declaration with one click and paste it straight into your CSS. Everything runs in your browser, so there is nothing to install and no signup required.

Front-end developers use it to prototype card, button, and avatar styles quickly. Designers use it to hand exact corner values to developers instead of vague redlines. Students learning CSS use the live preview to understand how the shorthand order works: top-left, top-right, bottom-right, bottom-left. Because the output is plain CSS, it works with Tailwind arbitrary values, styled-components, vanilla stylesheets, and inline styles alike.

The advanced blob mode exposes the full eight-value syntax that most developers never touch. CSS allows a slash inside border-radius: values before the slash set the horizontal radius of each corner and values after the slash set the vertical radius. A declaration like 30% 70% 70% 30% / 30% 30% 70% 70% produces an organic, asymmetric blob instead of a plain rounded rectangle. The randomize button generates fresh blob shapes until one fits your design.

Practical starting points: 4 to 8 pixels suits form inputs and small buttons, 12 to 24 pixels suits cards and modals, and 9999 pixels or 50 percent creates perfect pills and circles. For blobs, keeping every value between 25 and 75 percent avoids pinched corners. Remember that a radius larger than half the element size is clamped by the browser, so extreme values on small elements all look the same.

Border radius rarely travels alone. Pair your rounded shape with a soft shadow from our CSS Box Shadow Generator, or give it a colorful backdrop with the CSS Gradient Generator. Both tools output copy-ready CSS in the same way, so you can assemble a complete component style in under a minute without leaving ToolForte.

How the CSS Border Radius Generator Works

  1. 01Choose Simple mode for four corner sliders or Fancy Blob mode for the full 8-value syntax.
  2. 02Drag the sliders and watch the preview box update live; link corners for uniform rounding.
  3. 03In blob mode, adjust horizontal and vertical radii separately or hit Randomize for fresh shapes.
  4. 04Copy the generated border-radius declaration and paste it into your stylesheet.

Choosing the Right Border Radius

Border radius sets the visual tone of an interface more than most developers realize. Small radii of 4 to 8 pixels read as precise and technical, which suits dashboards, form inputs, and data-heavy tools. Medium radii of 12 to 24 pixels feel friendly and modern and dominate current design systems for cards, modals, and buttons. Full rounding with 9999 pixels or 50 percent creates pills and circles for tags, avatars, and toggle switches. Whatever you choose, keep it consistent: define two or three radius tokens and reuse them everywhere rather than inventing a new value per component. In blob mode, the slash syntax gives each corner separate horizontal and vertical radii, which is how organic shapes are made in pure CSS without images or SVG. Blobs work well as decorative backgrounds behind hero sections and profile photos. Animate between two blob values with a CSS transition on border-radius for a subtle living effect, and keep contrast in mind so text on top stays readable.

When to Use the Border Radius Generator

Reach for this generator whenever you are styling a new component and want to see corner values before committing them to code, when you need the exact shorthand order for four different corners, or when a design calls for an organic blob shape and you do not remember the double-slash syntax. It is also handy in design reviews: adjust the sliders live until stakeholders agree, then copy the final CSS. Because the output is standard CSS, it works in any framework or plain stylesheet.

Common Use Cases

  • Styling cards, buttons, and inputs with consistent rounded corners
  • Creating organic blob backgrounds for hero sections and landing pages
  • Turning square profile photos into circles or squircles with pure CSS
  • Matching a design mockup by fine-tuning each corner individually CSS Box Shadow Generator - Visual Editor
  • Prototyping pill-shaped tags and badges for a design system CSS Gradient Generator - Visual Editor Free

Expert Tips

  • Define radius tokens (small, medium, full) in CSS variables and reuse them so the whole interface feels coherent.
  • For blobs, keep all eight values between 25 and 75 percent; extreme values create pinched, unnatural corners.
  • Animate border-radius with a CSS transition between two blob values for a subtle organic motion effect.

Frequently Asked Questions

What is the order of values in the border-radius shorthand?→
Top-left, top-right, bottom-right, bottom-left, moving clockwise from the top-left corner. With two values, the first sets top-left and bottom-right and the second sets the other pair.
What does the slash in border-radius mean?→
Values before the slash set the horizontal radius of each corner and values after the slash set the vertical radius. Different horizontal and vertical radii per corner create elliptical, organic shapes.
Should I use pixels or percentages?→
Pixels keep the corner size constant regardless of element size, which is what you usually want for buttons and cards. Percentages scale with the element and are the right choice for circles, pills, and blob shapes.
Why do large radius values stop changing the shape?→
Browsers clamp each radius to at most half of the element's size on that axis. Once you pass that limit, the corner is already fully rounded and larger values look identical.

Related tools

12 suggested