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.

Frequently Asked Questions

How do I create a CSS border-radius with different corners?

Set each corner independently with the sliders and the tool writes the shorthand for you, for example border-radius: 10px 40px 10px 40px. It also supports the two-value elliptical syntax (horizontal / vertical) for organic, blob-like shapes. Copy the generated CSS straight into your stylesheet.

What is the difference between px and percent in border-radius?

Pixel values give a fixed corner radius regardless of the element size, while percentage values are relative to the element's dimensions: border-radius: 50% turns a square into a perfect circle and any box into an ellipse. Use px for consistent rounded corners and % for shapes that scale with the element.

How do I make a circle or blob shape with border-radius?

For a circle, apply border-radius: 50% to a square element. For an organic blob, use the eight-value elliptical syntax with different horizontal and vertical radii on each corner; this generator has a preview so you can shape it visually and copy the result.

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