Border Radius Generator
Generate CSS rounded border code
Border Radius
La propiedad border-radius permite crear esquinas redondeadas en los elementos. Puedes especificar valores diferentes para cada esquina para crear formas únicas.
CSS Border Radius Generator - Create Rounded Corners
How does border-radius work in CSS?
Border-radius sets the curvature of an element corners. The simple form, border-radius: 10px, applies the same radius to all four corners. The full syntax lets you specify each one in the order top-left, top-right, bottom-right, bottom-left. Each corner can take two values, horizontal and vertical, to create ellipses: border-radius: 50% / 25% produces ovals. A value of 50% on a square gives you a perfect circle. Modern browsers support border-radius without vendor prefixes. This tool lets you adjust every corner visually and copies out the matching CSS.
Common border-radius patterns
The recurring designs are pill or capsule buttons (border-radius: 9999px), perfect circles (50% on a square element), cards with soft corners (typically 8 to 16 pixels), rounded top corners for tabs (border-radius: 8px 8px 0 0), semicircular elements (50% on one side and 0 on the other), and organic shapes built from different asymmetric values on each corner. To keep a design consistent, define CSS variables such as --radius-sm: 4px, --radius-md: 8px and --radius-lg: 16px and use them systematically.
Performance and accessibility considerations
Border-radius is cheap and does not meaningfully affect performance, even with complex values. Combining it with box-shadow, filter or backdrop-filter across many elements can affect rendering, though. For accessibility, rounded corners are generally positive: they soften the interface and read as less aggressive. Make sure content is not clipped at the corners, especially images: with overflow: hidden and a large radius, content can be cut off unexpectedly, so test with browser zoom.
If you work with this tool, you will probably also find these useful PX to REM Converter, Gradient Generator, Flexbox Generator, Regex Tester.
Frequently asked questions
Why does my border-radius not produce a perfect circle?
For a circle the element must be square, with equal width and height, plus border-radius: 50%. On a rectangle, 50% produces an ellipse instead. For images, consider clip-path: circle(50%) or make sure the container is square and set object-fit: cover on the image.
How do I round only two corners?
Use the four-value syntax in order: top-left, top-right, bottom-right, bottom-left. border-radius: 20px 20px 0 0 rounds only the top. border-radius: 20px 0 0 20px rounds only the left side. This tool lets you adjust each corner independently.
What is the difference between px, % and em for border-radius?
px is absolute and stays the same regardless of element size. % is relative to the element, so 50% is half of the respective width or height. em is relative to the font size and scales with the text. For buttons and cards, px is predictable. For elements that scale, such as responsive avatars, % works better. em is useful when you want the rounding to follow the text size.
Can I animate border-radius?
Yes, border-radius is animatable with CSS transitions and animations. transition: border-radius 0.3s ease gives you a smooth hover effect, and you can build square-to-circle or shape-morphing effects. Performance is fine for simple animations, but avoid animating it alongside expensive properties such as filter or complex box-shadows.