CSS border radius generator gives you precise control over all four corner radii independently. Use the visual sliders to get the exact rounded shape you need, from subtle cards to pill buttons and organic blob shapes, then copy the CSS. Free, browser-based, and no signup required.
The Border Radius Generator is a visual tool for creating CSS border-radius values, including both the shorthand for uniform rounding and the four-corner individual values for asymmetric shapes. You drag sliders or type values for each corner (top-left, top-right, bottom-right, bottom-left) and see the resulting shape in a live preview. For advanced users, the tool also supports the two-value syntax for each corner (controlling both horizontal and vertical radii independently), which enables creating elliptical corners and organic blob-like shapes. The generated CSS is minimal and correct, ready to paste into any stylesheet. Border radius is used on buttons, cards, images, avatars, form inputs, and virtually every UI component in modern web design.
CSS border-radius seems straightforward but has a level of complexity that surprises many developers. The simple case, border-radius: 10px, applies 10px rounding to all four corners equally, which is the most common usage. The shorthand follows the same top-right-bottom-left clockwise pattern as margin and padding: border-radius: 5px 10px 15px 20px sets top-left to 5px, top-right to 10px, bottom-right to 15px, and bottom-left to 20px. The advanced two-value syntax (border-radius: 50% / 25%) sets horizontal and vertical radii independently for each corner, where the value before the slash is horizontal and the value after is vertical. This syntax unlocks elliptical corners: border-radius: 50% / 50% makes a perfect ellipse from any rectangular element (for a circle, the element must also be square). The "blob" aesthetic popular in modern UI (organic, irregular rounded shapes) is achieved using the multi-value syntax with different radii on each corner: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% creates an asymmetric rounded shape. These blob shapes are used for profile image frames, decorative backgrounds, and illustration accents. Pill-shaped buttons (border-radius: 999px or border-radius: 50em) are created by applying a border-radius larger than half the element height, which causes the browser to cap the radius at exactly half the height, producing a perfect semicircle on each end regardless of button width. The generator visualizes all of these effects accurately, making it easy to experiment with complex radius combinations.