Create CSS border radius values visually — circles, pills, and custom per-corner rounded corners with live preview.
Also add depth with our Box Shadow Generator or convert colors with the Color Converter.
🔒 All generation runs locally in your browser — nothing is stored or uploaded.
border-radius value ready to paste into your stylesheet.The CSS border-radius property controls the rounding of an element's corners. It accepts 1 to 4 values — one applies to all corners, two values set top-left/bottom-right and top-right/bottom-left pairs, and four values set each corner individually in the order top-left, top-right, bottom-right, bottom-left. This CSS border radius generator works as a rounded corner tool, CSS circle generator, and CSS pill shape tool for front-end developers and UI designers who need precise rounding values without guessing.
Front-end developers use border radius on almost every UI component — cards, buttons, badges, avatars, modals, input fields, and image thumbnails. The challenge is finding the right value for each context. A card might use 12px, while a pill button might use 999px, and an avatar needs 50% to become a circle. Switching between these and previewing the result in a live generator is much faster than editing CSS, saving the file, and refreshing the browser repeatedly.
UI designers transitioning from design tools to code often encounter a mismatch between the corner radius values in Figma or Sketch and what CSS produces. Design tools apply border radius symmetrically from the slider — the same as the sliders in this tool — making it straightforward to read a Figma component's corner radius and enter the same value here to generate the exact CSS needed. The four-corner independence option also handles asymmetric shapes like speech bubbles, folded paper effects, and custom icons that need different rounding on each corner.
The circle preset (border-radius: 50%) and pill preset (border-radius: 999px) are two of the most commonly searched CSS snippets — both are available as one-click options in this generator. All values generate instantly in the browser with no data sent to any server.