Border Radius Generator
Set the radius for each corner, keep them linked or set them one at a time, and copy the CSS.
Este conteúdo está em inglês.
Exemplos resolvidos
Same radius on every corner
All four corners set to 12px
border-radius: 12px;
When all four values match, one value is enough.
Rounded top corners only
Top left 12px, top right 12px, bottom right 0px and bottom left 0px
border-radius: 12px 12px 0px 0px;
The corners are listed top left, top right, bottom right and bottom left, so the bottom two are the last two values.
Sobre Border Radius Generator
Rounded corners soften a layout and make buttons, cards and images feel friendlier. In CSS the border-radius property controls this, and it can set all four corners with one value or give each corner its own amount. This generator lets you choose pixels or percentages, keep the four corners linked or change them one at a time, and see the result on a box that updates as you type. When you are happy with the shape, copy the border-radius line and use it in your stylesheet.
The corners are written in a fixed order: top left, top right, bottom right and bottom left. When the values repeat in a pattern, CSS allows a shorter form, so the tool writes the most compact line that is still correct. Pixel values keep the same size whatever the box size, while percentages scale with the box. A value of 50% on a square turns it into a circle, and a percentage works well for avatars and images that should stay round as they resize.
Como usar Border Radius Generator
- Choose pixels or percent from the unit list.
- Set a radius for the top left corner, or leave the link option on to set all corners together.
- Untick the link option to set each corner separately, such as a tab with only the top corners rounded.
- Copy the border-radius line from the box and paste it into your stylesheet.
Usos comuns
- Softening the corners of cards, buttons and input fields
- Rounding only the top of a tab or a sheet that slides up
- Making an avatar or thumbnail round with a percentage radius
- Matching corner styles across a design system
Perguntas frequentes
How does the order of the corners work in border-radius?
The four values run clockwise from the top left corner: top left, top right, bottom right and bottom left. If you give one value, it applies to all four. If you give two, the first applies to the top left and bottom right, and the second to the top right and bottom left. Three and four values follow the same clockwise pattern, which is why this tool shortens the line when it can.
Should I use pixels or percentages for border radius?
Use pixels when you want corners to stay the same size on every screen and box, such as buttons and cards with a consistent style. Use percentages when the shape should scale with its box, such as a circular avatar or a pill shape that should keep its curve as the width changes. Percentages are measured against the width and height of the element, so the result depends on its size.
How do I make a perfect circle or an oval?
To make a circle from a square box, set the radius to 50%. For a rectangle, 50% produces an oval, because each corner is an ellipse that spans half the width and half the height. Use a fixed pixel value that is at least half the smaller side if you want a pill shape with straight edges in the middle. The preview shows the result for the size of the box.
Why does my rounded corner look clipped on an image?
An image will not be rounded unless its corners are cut off by the border radius and the element hides what sits outside. Add overflow set to hidden on the wrapper, or apply the border radius directly to the image with the same value. If the image still looks square, check that it is not positioned outside a parent that has no radius of its own.
Can I round only one corner?
Yes. Untick the option that links the corners, then set the radius to 0 for the corners you want square and a value for the rounded corners. This is useful for tabs, speech bubbles and panels that attach to the edge of the screen. The generator writes the correct short line for the combination, so you can paste it straight into your stylesheet.