border-radius: 16px;The CSS Border Radius Generator is a visual editor for the CSS border-radius property. You drag a slider for each corner, watch a preview element round in real time, and copy the exact CSS it produces — no guessing pixel values and reloading the page.
The border-radius property looks simple but has a compact shorthand that trips people up: one value rounds all four corners, two values set the two diagonals, and four values run clockwise from the top-left. This tool lets you set each corner independently and then outputs the shortest equivalent shorthand automatically, so your CSS stays clean.
Everything runs in your browser. Start from a preset like Card, Pill, Circle, or Blob, fine-tune each corner, switch the unit between pixels and percentages, and copy the declaration. No account, no uploads, and it keeps working offline once the page has loaded.
Choose a preset such as Rounded, Pill, Circle, or Blob for an instant starting point, or begin from the default rounded corners.
Drag the top-left, top-right, bottom-right, and bottom-left sliders to round each corner independently, or set them all to the same value for a uniform radius.
Switch between px, %, em, and rem. Percentages create elliptical corners relative to the element size — set 50% on all corners to make a perfect circle or ellipse.
Copy the generated border-radius declaration, already collapsed to the shortest valid shorthand, and paste it into your stylesheet.
Independent sliders for all four corners let you build asymmetric shapes like leaf, tab, and speech-bubble radii, not just uniform rounding
The tool collapses your four corners to the shortest equivalent border-radius shorthand automatically, keeping your CSS clean and readable
Switch between px, %, em, and rem — percentages produce elliptical corners relative to the box size, which is how circles and blobs are made
A preview element updates instantly as you drag, so you can see exactly how the corners round before you copy anything
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity — build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!