ToolPuma Logo

CSS Border Radius Generator

Round element corners with live CSS output.

24px

What Is a CSS Border Radius Generator?

The CSS Border Radius Generator rounds corners precisely with separate controls for each corner. Use the uniform mode for consistent rounding or unlock all four corners to sculpt asymmetric shapes, and copy the exact border-radius declaration. This is the fastest way to turn boxes into pills, circles, and organic blobs.

How to Use This CSS Border Radius Generator

  1. 1
    Toggle Uniform radius for consistent rounding across all corners.
  2. 2
    Or disable it and adjust each corner (top-left, top-right, bottom-right, bottom-left) independently.
  3. 3
    Preview the element live and copy the generated CSS declaration.

Frequently Asked Questions

The shorthand lists four values clockwise from the top-left corner: border-radius: top-left top-right bottom-right bottom-left. With a single value all four corners share it.
Set the radius to half the element's width and height, or to a value like 9999px which produces a full circle on any element with equal sides and border-radius.
Yes. A large radius (e.g., 9999px) on a rectangular element creates a rounded pill shape, a very common style for buttons and badges.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

More Color & Design Tools

CSS Border Generator

Style borders with width, style, color, and radius.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.

Color Contrast Checker

Check the contrast ratio between two colors.