Visually design any CSS border-radius shape — from simple rounded corners to pills, circles, blobs, and organic forms. Adjust individual corners, toggle elliptical (horizontal/vertical) values, and copy the ready-to-use CSS in one click.

Presets

Preview

Controls

All corners move together
H
H
H
H

Generated CSS

border-radius: 0;

How to Use

  1. Choose a preset to start from a known shape, or drag the sliders to build from scratch.
  2. Toggle px / % — percentage values are relative to the element’s dimensions; pixels are absolute.
  3. Unlink corners to set each corner independently.
  4. Enable Elliptical on any corner to separate horizontal and vertical radii for organic shapes.
  5. Resize the preview box to see how your radius looks at different aspect ratios.
  6. Copy the CSS and paste it directly into your stylesheet.

Quick Reference: border-radius Syntax

ValueMeaning
border-radius: 8pxAll corners equal
border-radius: 8px 16pxTL+BR / TR+BL
border-radius: 8px 16px 24px 32pxTL TR BR BL (clockwise)
border-radius: 40% 60% / 60% 40%Elliptical (H / V)

Generate box shadows → CSS Box Shadow Generator Build gradients → CSS Gradient Generator Create Flexbox layouts → CSS Flexbox Generator