jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

CSS Border Radius Builder

Control each corner radius separately or use the shorthand. Choose pixel, rem, or percentage units. See a live preview of the rounded element as you adjust values.

Loading tool...

What is CSS Border Radius Builder?

border-radius controls how much each corner of an element is rounded, but the four-value shorthand and the eight-value elliptical syntax can be confusing. This tool makes the properties visual by letting you set each corner independently and choose between px, rem, and percentage units, so you can see the effect before writing the CSS declaration.

Quick answer

Set rounded corners on any element by adjusting each corner independently or using a uniform value. Choose px, rem, or percentage units and see a live preview of the result.

Limitations

  • The tool shows uniform and individual corner radius values. It does not support the elliptical syntax that uses a slash to set separate horizontal and vertical radii per corner.
  • Percentage border-radius values are relative to the element dimensions and may produce unexpected elliptical corners on elements with dynamic sizing.

How to use this tool

  1. Set a radius value for each corner individually or enable uniform mode to apply one value everywhere.
  2. Choose the unit you want to use: px, rem, or percentage.
  3. Watch the live preview update as you adjust each corner.
  4. Copy the generated CSS declaration into your stylesheet.

What you can use it for

  • Create pill-shaped buttons by setting the border-radius larger than the button height.
  • Make circular avatars and profile images with border-radius: 50%.
  • Design card corners with subtle rounding on the top corners and sharp bottom corners.

Use cases

Practical examples

Example

Pill button with large radius

A call-to-action button needs a fully rounded pill shape. Setting border-radius to 999px on a short button creates rounded ends regardless of the button width.

Example

Card with subtle corner rounding

A content card uses 8px rounding on all corners. The uniform mode applies the same value everywhere, producing a soft but professional appearance.

Common mistakes

  • Using px on elements that should scale with font size, preventing the corner radius from adjusting when text is resized.
  • Forgetting the slash syntax for elliptical corners, which sets separate horizontal and vertical radii for advanced shapes.
  • Setting a radius larger than half the element size, which can cause the corners to overlap and produce unexpected results.

Verification

  1. Test the generated border-radius on the target element at different sizes and screen widths to confirm corner proportions remain consistent.
  2. Inspect the element in DevTools to verify the computed border-radius values match the declaration.

FAQ

Questions about CSS Border Radius Builder

How do I make a perfect circle?

Set border-radius to 50% on a square element. This creates a perfect circle because each corner is rounded to half the element width and height.

What unit should I use for border-radius?

Use rem for radii that should scale with the base font size and px for fixed-size decorative elements. Use percentage for circular shapes and fluid rounding.

How do I make a perfect pill shape?

Set border-radius to a value larger than the element height, such as 999px, on a rectangular button or badge. The browser renders fully rounded ends regardless of the element width, creating a pill shape.

Can I use percentage values for border-radius?

Yes, but percentage values refer to the element dimensions. A value of 50% on a square element creates a perfect circle. On a rectangle, 50% produces an elliptical shape because the percentage applies to both width and height independently.

Related tools

More css tools

Also try

Also try