SEOlust logo SEOlust
CSS & Design Generators

CSS Border-Radius Generator

Round element corners visually and copy the CSS — control each corner, make circles and pill shapes, or generate organic blobs with a live preview. Free.

All tools

💡 How to use

  • Drag each corner slider, or keep "Link all corners" on to round them together.
  • Use the "Random blob" button for organic, asymmetric shapes.
  • Copy the border-radius CSS and paste it onto any element.

Free CSS Border-Radius Generator

Round element corners visually and copy the CSS in one click. Control each corner independently, preview the result live, and even generate organic blob shapes — then paste production-ready border-radius CSS into your project. Free, no sign-up, runs in your browser.

What is the CSS border-radius property?

The border-radius property rounds the corners of an element, turning sharp rectangles into soft cards, pill buttons, and even circles. You can round all four corners equally with a single value, or set each corner separately for custom shapes. It is one of the most-used CSS properties in modern interface design because rounded corners feel friendlier and more polished than hard edges.

How to use the border-radius generator

Shaping your element takes seconds:

  • Drag the corner sliders to round each corner, or keep 'Link all corners' on to adjust them together.
  • Pick a box color to preview the shape in context.
  • Try 'Random blob' for organic, asymmetric shapes.
  • Copy the generated border-radius CSS and paste it onto your element.

Making circles, pills, and blobs

A few common shapes are easy to remember. Set border-radius to 50% on a square element to make a perfect circle. Use a very large pixel value (like 999px) on a wide button to make a pill shape. For organic 'blob' shapes, use the two-value percentage syntax — a horizontal set and a vertical set separated by a slash — which the Random blob button generates for you.

Pixels vs percentages

Pixel values give a fixed corner size that stays the same regardless of element dimensions — ideal for cards and buttons where you want consistent rounding. Percentage values are relative to the element's size, so they scale with it, which is how you create circles and ellipses. Choose pixels for predictable UI corners and percentages for shapes that should adapt to the element.

Why rounded corners improve design

Rounded corners are more than decoration. They guide the eye, make interactive elements look tappable, and soften dense layouts so they feel less intimidating. Consistent corner radii across your buttons, inputs, and cards are a hallmark of a mature design system — pick one or two radius values and reuse them everywhere for a cohesive, professional look.

Pro tip

Keep your radii consistent: define a small set (for example 8px for inputs, 12px for cards, 999px for pills) and stick to them across the whole interface. Pair this with our Box-Shadow Generator and CSS Gradient Generator to build complete, polished components in minutes.

FAQ

Is this Border-Radius Generator free?
Yes. It is completely free, runs in your browser, and needs no account or sign-up.
How do I round only one corner in CSS?
Turn off 'Link all corners' and drag a single corner's slider, or use the individual properties like border-top-left-radius. The generator outputs the shorthand automatically.
How do I make a perfect circle with border-radius?
Apply border-radius: 50% to a square element (equal width and height). For an ellipse, use 50% on a non-square element.
How do I make a pill-shaped button?
Use a very large radius such as border-radius: 999px on a button that is wider than it is tall. The corners round fully into a pill shape.
What is the difference between px and % for border-radius?
Pixel values create a fixed corner size that stays constant, while percentage values scale with the element's dimensions. Use pixels for consistent UI corners and percentages for circles and blobs.
How do I create a blob shape?
Use the eight-value percentage syntax (four horizontal values, a slash, then four vertical values). Click 'Random blob' in the generator to produce organic shapes instantly.
Does border-radius work in all browsers?
Yes. border-radius is supported in every modern browser, including all current versions of Chrome, Edge, Firefox, and Safari.

Related tools

Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Loader & Spinner Generator for a faster SEO workflow.

  • CSS Box-Shadow Generator — Design CSS box-shadows visually with live preview — control offset, blur, spread, opacity, color, and inset, …
  • CSS Loader & Spinner Generator — Create pure-CSS loading spinners and animations — spinner, dual-ring, pulse, and dots styles with adjustable …
  • CSS Flexbox Generator — Build flexbox layouts visually — set direction, justify, align, wrap, and gap with a live preview, then copy …
  • CSS Gradient Generator — Create CSS gradients visually and copy the code in one click — linear, radial, and conic gradients with unlim…
  • CSS Text-Shadow Generator — Add shadows and glow effects to text visually — adjust offset, blur, opacity, and color with a live preview a…