Skip to main content
DevStackKit
All tools

Border Radius Generator

Round the corners of a box with a live preview, set each corner on its own, or make a random blob shape. Copy the CSS or Tailwind.

Preview

CSS

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Done here? Use the Send to… menu on the result to carry it on to CSS Beautifier.

Free Online CSS Border Radius Generator

Round the corners of a box and see it change as you move the sliders. Press Random blob for an organic shape, then copy the CSS or Tailwind class. It gives developers a quick browser-based way to solve a focused border radius generator task before moving the result into a project.

How to round corners

Move a slider to set a corner. Keep Link all corners on to change them together, or turn it off to set each corner on its own.

How to make a blob

Press Random blob until you like the shape. Use Same shape again by typing its number. The code uses the slash form for ellipse corners.

Common mistakes

  • Using px radii on boxes of different sizes and expecting the same look: use % for shapes that must scale.
  • Forgetting overflow: hidden on a rounded parent, so child images still show square corners.

Frequently asked questions

How do I make a circle?
Use a square box and set every corner to 50%. In px, any value of half the box size or more also makes a circle.
How is a blob made?
Each corner gets a different horizontal and vertical radius, written with a slash: 60% 40% 55% 45% / 50% 60% 40% 50%. The numbers across opposite corners add up to 100%, so the shape stays closed and smooth.
What does the slash mean?
Before the slash are the horizontal radii of the four corners (top-left, top-right, bottom-right, bottom-left), after it the vertical ones. Corners become ellipses when they differ.
Can I get the same blob again?
Yes. Each blob has a number (seed). Type the same seed and you get the same shape.
How do I use this border radius generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →