Border Radius Generator
Create CSS border-radius with visual preview.
Esquinas (horizontal)
border-radius: 16px;CSS rounded corners generator (border-radius)
CSS border-radius allows rounding corners of any HTML element, from subtle curves to complete circles. It is one of the most used properties in modern web design for creating friendly and modern interfaces.
Our generator lets you adjust each corner individually or all at once. It also supports elliptical border-radius (advanced mode) for organic asymmetric shapes.
Includes presets like square, rounded, pill, leaf, drop, and ticket. The preview updates in real time and CSS code is generated automatically.
Frequently asked questions
What is elliptical border-radius?
Elliptical border-radius uses the 8-value syntax: the first 4 define horizontal radii and the last 4 define vertical radii, separated by "/". This allows creating corners with asymmetric curves, producing more complex organic shapes than basic border-radius.
How do I make a perfect circle?
To create a perfect circle, set border-radius: 50% on an element with the same width and height. In our generator, use the "Pill" preset (100px on all corners) and make sure your element is square.
Is it compatible with all browsers?
Yes, border-radius is compatible with all modern browsers and has been for years, including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes are needed for any current browser.