CSS Border Radius Generator Online - Free Rounded Corner Tool

Features

4-corner control

Unified / independent mode

Slider + number input

Live preview & CSS code

How to Use

1. Drag the radius slider — the neutral card on the stage previews the corners at real size.

2. Switch to "Per corner" to shape each corner independently.

3. Copy the CSS — it uses the shortest valid form.

About this tool

Rounded corners are one line of CSS, but getting the value right is easier when you can see it. This generator previews border-radius on a neutral card at real size while you drag a single slider or shape each corner separately. It then writes the shortest valid declaration: one value when all corners match, and two, three or four values when they differ, in the order top-left, top-right, bottom-right, bottom-left. Small radii of 4–8px suit buttons and inputs, 12–24px feel friendly on cards, and very large values turn short elements into pills. Switch the stage background to see how the shape reads on light and dark surfaces before copying the CSS into your stylesheet.

Frequently Asked Questions

What order do the four border-radius values follow?

Clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. With two values, the first applies to top-left and bottom-right and the second to top-right and bottom-left.

How do I make a pill-shaped button or a circle?

For a pill, use a radius at least half of the element's height, or simply a very large value like 9999px. For a circle, give the element equal width and height and set border-radius to 50%.

Why is my rounded corner cut off or showing the background?

Child elements can overflow the rounded corner. Add overflow: hidden to the container, or give the child a matching radius, so images and backgrounds follow the curve.

Can I create elliptical corners?

CSS allows separate horizontal and vertical radii with a slash, for example border-radius: 50% / 20%. This generator focuses on circular corners in pixels, which cover most interface work; you can add the slash syntax by hand for special shapes.

Does border-radius affect layout or click area?

No. It only changes how the element is painted and clipped. The element keeps its rectangular box for layout, and clicks in the transparent corners still register on the element.