CSS Border Radius Generator
border-radius: 16px;
About the CSS Border Radius Generator
The CSS border-radius property is one of the most commonly used styling techniques in modern web design. It allows developers to create rounded corners on any HTML element, transforming sharp rectangular boxes into softer, more visually appealing shapes. This free tool helps you generate the perfect border-radius CSS code for your projects without any manual calculations.
Our generator provides individual controls for each corner of your element: top-left, top-right, bottom-right, and bottom-left. You can choose between pixel (px) and percentage (%) units depending on your design needs. Pixel values create consistent curves regardless of element size, while percentage values scale proportionally, making them ideal for responsive designs.
The advanced elliptical mode unlocks the full power of CSS border-radius by allowing you to specify both horizontal and vertical radii for each corner independently. This creates oval-shaped curves instead of circular ones, enabling unique design effects that were previously difficult to achieve. The CSS syntax uses a forward slash to separate horizontal and vertical values (e.g., 10px 20px / 30px 40px).
The link all corners option is perfect when you want uniform rounding across all corners. Simply toggle it on, and any adjustment you make will apply to all four corners simultaneously. This saves time when creating consistent, symmetrical designs. The live preview updates instantly as you adjust the values, so you can see exactly how your border-radius will look before copying the CSS code.