CSS Border Radius Generator
Create custom border radius shapes with live preview and instant CSS output.
Preset Shapes
Preview
Generated CSS
border-radius: 10% 10% 10% 10%;
What the CSS Border Radius Generator does
The CSS Border Radius Generator is a visual tool for shaping the corners of an element without writing CSS by hand. You adjust each corner independently — top-left, top-right, bottom-right and bottom-left — and a live preview updates instantly so you can see exactly how the shape looks before you copy a single line of code.
It outputs a ready-to-paste border-radius declaration using percentage values, which makes the shape scale proportionally with the element's size. This is useful for buttons, cards, avatars, badges, pills and decorative blobs, as well as more unusual silhouettes like leaf, ticket and asymmetric shapes that are tedious to tune by trial and error.
The tool is aimed at front-end developers, designers and anyone learning CSS who wants to understand how the four-value (and eight-value elliptic) border-radius syntax actually behaves.
How to use it
Start by picking one of the preset shapes such as Rounded, Pill, Squircle or Leaf to get a sensible base, then fine-tune the individual corner sliders to taste. Enable the lock option if you want all four corners to change together for a perfectly uniform radius.
Switch on the elliptic mode to control the horizontal and vertical radius of each corner separately. This produces the full eight-value syntax (four values, a slash, then four more), which lets you create soft, organic curves that a single radius value cannot.
When the preview looks right, copy the generated CSS with one click and paste it straight into your stylesheet. Because the values are percentages, the same rule will keep its proportions whether the element is small or large.
Tips for good results
Percentage radii are measured against the element's own width and height, so a value of 50% on every corner turns a square into a circle and a rectangle into a pill or ellipse. If you need a fixed visual curve that does not change with element size, you can replace the % units with px in your stylesheet after copying.
For card-style layouts a small uniform radius of around 8–16% usually reads as modern without looking gimmicky, while larger asymmetric values are great for hero sections and decorative shapes.