Build CSS border-radius for cards, buttons, inputs, badges, modals, avatars, and design systems.
CSS Border Radius Generator helps create rounded corners for cards, buttons, inputs, badges, modals, avatars, and other UI components. Adjust one radius or each corner separately, preview the result live, and copy CSS, a CSS variable, inline style, or a Tailwind class. Generation runs locally in your browser, and data is not sent to the server.
Choose a related tool for the next step.
Data passed between tools is kept only in the current browser session.
The CSS Border Radius Generator helps you quickly pick corner rounding for cards, buttons, inputs, badges, modals, avatars, and other UI elements. You can set one radius for all corners, different values per corner, choose px, rem, em, or %, use pill or circle presets, preview the result live, and copy ready-made CSS. Output is available as a CSS rule, border-radius value, CSS variable, inline style, Tailwind class, or a fragment for a design system. Generation runs locally in your browser, and your data is not sent to the UtiLab server.