Border Radius Generator

Visual CSS border-radius generator with per-corner controls and elliptical mode. Create rounded corners, pill shapes, and organic blob designs. Copy CSS instantly.

🔲 Border Radius Generator

16px

Size×
border-radius: 16px;

Tailwind: rounded-[16px]

CSS Border Radius Generator

The CSS border-radius property rounds the corners of any HTML element. Its elliptical syntax (border-radius: 50% 20% / 30% 40%) can produce organic blob shapes, pill buttons, tear-drop forms, and curved silhouettes that are impossible to visualize by writing coordinate values manually.

This free border-radius generator provides interactive per-corner sliders and a live preview, so you design visually and copy production-ready CSS.

How to use the Border Radius Generator

  1. Choose uniform mode for equal corners, or per-corner for independent control.
  2. Drag the sliders or type values to adjust each corner.
  3. Enable elliptical mode to control horizontal and vertical radii separately for blob shapes.
  4. Preview the result on a live element in the canvas.
  5. Copy the generated border-radius CSS and paste into your stylesheet.

Border radius use cases

  • Buttons and badges: A uniform 4-8px radius softens sharp corners. A 9999px value creates a full pill shape.
  • Cards and panels: 8-16px on all corners is the standard for elevated card components.
  • Avatars and profile images: border-radius: 50% turns any square element into a circle.
  • Blob backgrounds: The elliptical syntax creates organic irregular shapes for hero sections and decorative backgrounds.
  • Input fields: Consistent corner rounding across text inputs, selects, and textareas for a unified form design.

CSS border-radius shorthand reference

  • border-radius: 8px: All four corners equal.
  • border-radius: 8px 16px: Top-left/bottom-right = 8px, top-right/bottom-left = 16px.
  • border-radius: 8px 16px 24px 32px: Each corner individually (clockwise from top-left).
  • border-radius: 50% 20% / 80% 30%: Elliptical radii with different horizontal/vertical values per pair.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolAspect Ratio CalculatorCalculate aspect ratios and pixel dimensions for media and screens.

Free forever, no ads, no tracking. Support the project