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 is a free online tool for creating rounded corners and custom CSS shapes. Adjust all four corners independently or use a uniform radius when you want consistent rounding across an element. It is useful for buttons, cards, profile images, containers, badges, pills, circles, and more creative UI shapes. The live preview makes it easy to experiment before copying the exact border-radius CSS declaration.

How to Use This CSS Border Radius Generator

  1. 1
    Choose uniform or custom modeKeep Uniform radius enabled when all corners should match, or disable it for individual corner control.
  2. 2
    Adjust the cornersSet the top-left, top-right, bottom-right, and bottom-left values independently when creating an asymmetric shape.
  3. 3
    Preview the resultWatch the element update while you change the radius values.
  4. 4
    Copy the CSSCopy the generated border-radius declaration and use it in your website or application.

Frequently Asked Questions

The border-radius property rounds the corners of an HTML element. A small value creates subtle rounding, while a large value can produce pill-shaped elements, circles, and more organic shapes.
When four values are provided, they represent the top-left, top-right, bottom-right, and bottom-left corners in clockwise order. A single value applies the same radius to all four corners.
For a square element, setting border-radius: 50% creates a circle. A very large pixel value can also create fully rounded corners on rectangular elements, producing a pill shape.
Use a rectangular button with a large border-radius, such as 9999px, or use a radius large enough to fully round the shorter dimension of the button.
Yes. CSS supports separate properties for each corner, including border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
Rounded corners can soften the appearance of interfaces and create a consistent visual language across buttons, cards, inputs, images, and other components. The appropriate radius depends on the design system.

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.