A border radius generator is a tool that rounds the corners of an HTML element and gives you the exact CSS border-radius value to copy. The generator below lets you set one radius for all four corners or a different radius for each one, shows a live preview, and writes the border-radius line for you to paste into your stylesheet.
What the CSS border-radius Property Is
The border-radius property in CSS rounds the corners of an element’s outer border edge. It applies to any block, from a button to a card to an image, and it works whether or not the element has a visible border. The value you give is the radius of the curve at each corner, measured in pixels, ems, rems, or a percentage. A radius of zero leaves the corner square, and a larger radius makes a softer, rounder corner. The property also clips the background and any box shadow to the rounded shape, so the whole box follows the curve.
How to Use It
- Keep “Link all corners” checked to round every corner with one slider. This is the common case.
- Drag the all-corners slider until the preview matches the shape you want.
- Uncheck “Link all corners” when you need a different radius on each corner, then set the four sliders one at a time.
- Read the generated value in the field below the preview.
- Copy the border-radius line and paste it into the CSS rule for your element.
The border-radius Syntax
The property accepts one to four values, and the count decides which corners each value controls. This shorthand is the same pattern CSS uses for margin and padding, read clockwise from the top-left corner.
Common Border Radius Values
| Element | Typical value | Result |
|---|---|---|
| Button | border-radius: 6px | Slightly softened corners |
| Card or panel | border-radius: 12px to 16px | Clearly rounded box |
| Pill or tag | border-radius: 999px | Fully rounded ends |
| Circle | border-radius: 50% | Round shape from a square |
| Square | border-radius: 0 | Sharp corners |
Making a Perfect Circle With 50%
A percentage radius is calculated from the element’s width and height, so border-radius: 50% rounds each corner to half of the side it sits on. When the element is a perfect square, those curves meet and the box becomes a circle. This is the standard way to make round avatars and icon buttons. If the element is a rectangle instead of a square, 50% produces an ellipse rather than a circle, so set equal width and height when you need a true circle. A very large pixel value such as 999px gives the pill shape used for badges and rounded buttons, because the radius is capped at half the shorter side.
When to Use It
Reach for border-radius whenever you want a box to read as a single, contained unit rather than a hard rectangle, such as buttons, cards, input fields, modals, and avatars. Keep the radius consistent across a layout so the interface feels coherent, and match the curve to the size of the element, since a small radius on a large card can look unfinished while a large radius on a small button can look out of place. For a design that calls for sharp edges, leave the radius at zero. The generator above lets you test each of these choices before you commit the value to your stylesheet.
Last Thoughts on the Border Radius Generator
Rounded corners are one of the smallest CSS changes with one of the largest effects on how a layout feels, and border-radius gives you full control over every corner of every box. The trick is matching the radius to the element and keeping it consistent, which is far easier when you can see the curve change as you drag a slider instead of guessing pixel values by hand.
Shape the corners you need above and paste the value into your CSS. For more styling, pair it with our box shadow generator and CSS gradient generator, tune motion with the cubic bezier generator, and browse the rest of our free online tools.
Key Takeaways:
- The CSS border-radius property rounds the corners of any element’s box, including its background and shadow.
- One value rounds all four corners; four values set top-left, top-right, bottom-right, and bottom-left in clockwise order.
- A percentage radius is measured from the element’s own size, so 50% on a square produces a circle.
- Use small radii for buttons, medium radii for cards, and a very large radius for pill shapes.
- Keep the radius consistent across a layout and match it to the size of each element.
- This generator runs entirely in your browser and writes the border-radius value for you to copy.
Frequently Asked Questions (FAQs)
What does the CSS border-radius property do?
It rounds the corners of an element’s box. The value you set is the radius of the curve at each corner, so a larger value gives a softer, rounder corner and a value of zero leaves the corner square. It works on any element and also clips the background and box shadow to the rounded shape.
How do I round only one corner?
Uncheck “Link all corners” in the tool above and set that single corner’s slider while leaving the others at zero. In CSS you can write four values, such as border-radius: 16px 0 0 0, or target one corner directly with a property like border-top-left-radius.
How do I make a circle with border-radius?
Set border-radius: 50% on an element that has equal width and height. The percentage is measured from the element’s own size, so on a square the four curves meet and form a circle. On a rectangle the same value produces an ellipse instead.
What is the order of the four border-radius values?
The four values are read clockwise starting at the top-left: top-left, top-right, bottom-right, then bottom-left. This is the same pattern CSS uses for margin and padding shorthand. With two values the first sets top-left and bottom-right, and the second sets top-right and bottom-left.
Should I use pixels or percentages for border-radius?
Use pixels for a fixed, predictable curve that stays the same no matter the element’s size, which suits buttons and cards. Use a percentage when you want the radius to scale with the element, such as 50% for a circle or round avatar. Percentages are measured against the element’s width and height.
Does border-radius work without a visible border?
Yes. The property rounds the element’s corner regardless of whether a border is drawn, and it also rounds the background color or image and any box shadow. You do not need to set a border for the rounding to take effect.
