Border Radius Generator

Create rounded corners and blob shapes with a live preview.

About Border Radius Generator

Generate border-radius values visually and copy them straight into your CSS. Use it for buttons, cards, images, avatars, and playful “blob” UI shapes.

How to use

  1. Pick a preset or adjust the corner sliders.
  2. Enable Elliptical to control X/Y radii separately.
  3. Copy the generated value (or a full CSS snippet).

CSS syntax tips

  • 4 values: border-radius: TL TR BR BL;
  • Elliptical: border-radius: TLx TRx BRx BLx / TLy TRy BRy BLy;
  • Percent units scale with the element size and are great for fluid rounding.

Good use cases

  • Designing buttons and cards that match a brand style.
  • Creating avatar crops (try 50%).
  • Making organic shapes for hero sections and backgrounds.

More CSS tools

Format, compress, and polish your styles.

CSS BeautifierCSS MinifierColor Palette Generator

To keep styling polished, pair this with Box Shadow Generator, CSS Gradient Generator, and Color Converter (HEX/RGB/HSL).

Related Tools

More tools you may find useful.

Recent Blog Posts