Shape CSS border radius with sliders for each corner, horizontal and vertical. Watch the live preview update instantly, then copy clean shorthand or download a .css snippet - all processing stays in your browser.
Technical Specifications
Value ranges and output rules used for every corner.
| Specification |
Details |
| Corner range |
0px to 200px per radius, integers, adjustable by slider or number field |
| 8-point control |
Four horizontal radii (X) plus four vertical radii (Y): TL, TR, BR, BL |
| Uniform mode |
One checkbox links all eight radii; untick for independent corner shaping |
| Output syntax |
Optimized shorthand: one value when uniform, slash syntax when X and Y differ |
| Elliptical form |
border-radius: TL TR BR BL / TL TR BR BL - second group holds the vertical radii |
| Presets |
6 built-in shapes: Rounded Card, Soft Large, Pill, Leaf, Blob, Sharp Mixed |
| Processing location |
100% client-side JavaScript in your browser memory; nothing is uploaded |
| Export |
Copy declaration to clipboard or download a plain .css snippet file |
| Usage limit |
None - generate unlimited radii for free, no signup required |
Understanding CSS Border Radius
The CSS border-radius property rounds the corners of boxes, images, buttons, and cards. In its longest form it accepts four horizontal radii followed by a slash and four vertical radii, one pair per corner in the order top-left, top-right, bottom-right, bottom-left. When the two values of a corner match, the curve is circular; when they differ, it is elliptical.
Shorthand patterns worth knowing
One value rounds all corners equally, two values pair opposite corners, and four values address each corner clockwise from the top-left. The slash form appears only when vertical radii differ from horizontal ones. This generator collapses the output automatically, so uniform designs copy as a single value like 24px while elliptical designs copy the full slash syntax.
Common shapes and when to use them
Cards and dialogs typically use 8 to 24px for a clean modern feel, while pills use half the element height, which this tool approximates with 200px on the preview box. Leaf shapes round two opposite corners and sharpen the other two, and blob shapes mix different X and Y values per corner for organic panels. Combine rounded boxes with soft depth from the Box Shadow Generator to finish cards and modals.
Radius, borders, and overflow
Borders follow the same curve as the box edge, so thick borders look best with slightly larger radii. Backgrounds and images are clipped to the curve automatically, but child content with its own background can poke past the corners unless the parent sets overflow hidden. For fully round avatars, pair equal width and height with a 50 percent radius or the Pill preset here, then style the button itself with the CSS Button Generator.
Honest limitations
Pixel radii do not scale when an element resizes, so a 24px corner on desktop looks proportionally larger on a small phone card; use percentage radii in your own stylesheet for fluid scaling. This tool outputs pixel values up to 200px only and a single border-radius declaration; it does not generate logical properties like border-start-start-radius or per-corner longhand lines.
Privacy and Client-Side Security
Privacy Guarantee: All generation occurs locally inside your browser. Your slider values and colors are never transmitted, stored, or recorded on remote servers.
Many online editors save drafts or track style choices on a server, which is unnecessary for fixed-syntax CSS math. TinyToolzz keeps everything in-page: value clamping, shorthand collapsing, and string building run with plain JavaScript number operations.
Because nothing is uploaded, there is no waiting, no account, and no copy of your design retained anywhere. Your values exist only in the tab's memory and are discarded when you close the page or click Reset.