OnSumoTools

Border Radius Visualizer

This tool lets you set CSS border-radius values by dragging corner handles on a live preview shape. Adjust each corner independently or all at once, switch between simple and advanced (eight-value) syntax, and copy the generated CSS into your project. Everything runs in your browser. No server, no signup, no data leaves your machine.

How does the CSS Border Radius Generator work step by step?

CSS border-radius accepts one to four values that control corner rounding. A single value (border-radius: 8px) rounds all four corners equally. Two values set top-left/bottom-right, then top-right/bottom-left. Three values set top-left, then top-right/bottom-left, then bottom-right. Four values target each corner in clockwise order starting from top-left.

What does a typical CSS Border Radius Generator result look like?

A card uses 8px on every corner, which outputs border-radius: 8px and maps to Tailwind rounded-lg. A pill button uses 9999px on a wide rectangle so the ends form semicircles.

Frequently asked questions

  • What is the difference between border-radius in pixels and percentages?

    Pixels set a fixed curve size that does not change with element dimensions. Percentages scale with the element's width and height—50% on a square creates a circle, but 50% on a rectangle creates an ellipse. Use pixels for consistent radii and percentages for responsive shapes.

  • Can I set a different radius for each corner?

    Yes. Use four-value syntax: border-radius: 8px 16px 24px 32px (top-left, top-right, bottom-right, bottom-left). Or use longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

  • How do I make a perfect circle with border-radius?

    Apply border-radius: 50% to a square element (width and height must be equal). If the element is rectangular, 50% will create an ellipse. For a perfect circle on any aspect ratio, set width and height to the same value first.

  • What happens if my border-radius is larger than the element?

    Browsers clamp border-radius to a maximum of 50% of the element's smaller dimension. A 100px box with border-radius: 200px renders as if you set border-radius: 50px. The generator auto-clamps to prevent this confusion.

  • Can I animate border-radius with CSS transitions?

    Yes. Border-radius is a fully animatable CSS property. Use transition: border-radius 0.3s ease to smooth radius changes on hover or state change. The generator outputs CSS that works directly in transition declarations.

  • Do all browsers support border-radius in 2026?

    Yes. Border-radius has been supported without vendor prefixes in all major browsers since 2013. No -webkit- or -moz- prefixes are needed. The syntax is identical across Chrome, Firefox, Safari, and Edge.

Related tools

Rounded corners, done by eye

Border radius looks simple until you want a leaf shape, a pill or a blob. Then you're typing eight numbers and a slash and guessing. This visualizer lets you drag sliders for each corner and see the shape change, then copy the CSS.

It supports the full syntax, including the slash for elliptical corners, where the horizontal and vertical radii differ.

Pixels or percentages

A pixel radius stays the same size no matter the box. A percentage scales with the element. 50 percent on a square gives a circle. On a rectangle it gives an oval.

Use pixels for buttons and cards, where you want the same softness everywhere. Use percentages for shapes that must follow the box.

Common shapes

Presets in the tool give you a start. Adjust from there instead of building from zero.

  • Circle: equal width and height, border-radius 50%
  • Pill: a large radius, such as 9999px, on a wide box
  • Leaf: two opposite corners round, the others square
  • Blob: different elliptical values on each corner

What if the radius is too big

Browsers scale all radii down proportionally so they never overlap. So 9999px on a pill is safe. You won't break the layout.

You can animate border-radius with a transition. It's smooth, though large animated blurs and shadows on top can slow low-end phones. Keep effects light.

Browser support

Every current browser supports border-radius, including the slash syntax. No prefixes needed. Copy the shorthand and paste it in. Nothing you set is sent anywhere.

Building shapes from one property

Rounded corners can do more than soften a box. Set the radius to 50 percent on a square and you get a circle. On a rectangle you get an ellipse. Give a wide rectangle a radius equal to half its height and you get a pill, the classic shape for buttons and tags.

Mix values per corner and you get leaf shapes, speech bubbles and blobs. A shape like 30% 70% 70% 30% / 30% 30% 70% 70% looks organic, and it needs no image. The slash separates horizontal and vertical radii, which is how you get elliptical corners.

Drag the handles until it looks right, then copy the line.

Design habits that hold up

Keep radii consistent across a site. Pick two or three sizes, say 4, 8 and 16 pixels, and reuse them. Random radii make a layout feel unfinished.

Nested rounded boxes need smaller inner radii. If the outer radius is 16 and the padding is 8, the inner element should be near 8. Otherwise the gap between the curves looks uneven.

Remember overflow. A rounded container doesn't clip its children unless overflow is hidden, so square images can poke out of the corners.

Radius in real components

Cards usually sit between 8 and 16 pixels. Buttons range from 4 for a sharp look to full pills. Avatars use 50 percent. Pick a scale and apply it to every component, so the site feels like one design.

On inputs, keep radii smaller than on cards. Chunky rounded fields look childish in business apps.