Set each corner with a slider and copy the border-radius CSS.
With four values, border-radius goes clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. The tool writes the shortest version that means the same thing: one value when all corners match (border-radius: 20px;) and two when opposite corners match (20px 60px), so the code stays tidy.
A radius at least half the element's height turns the short sides into full semicircles, the usual pill-shaped button. On a square element, 50% makes a circle.
4 to 8px gives inputs and buttons a gentle softening, 12 to 16px suits cards and dialogs, and a very large value such as 9999px makes pill-shaped buttons and tags whatever their width. Using the same few values across a site makes it look consistent, which is why design systems usually define small, medium and large radius tokens.
Nested elements look best when the inner radius is the outer radius minus the padding between them, so the curves stay parallel.
Give the element the same width and height and set border-radius: 50%.
Set the top-left and top-right sliders and leave the bottom ones at 0.
If the image sits inside a rounded container, add overflow: hidden to the container, or put the border-radius on the image itself.
This tool uses pixels. Percentages also work in CSS and scale with the element's size.
OneClickly is a set of 119 free tools for PDFs, images, text, everyday math and code. They run in your browser, so the files and text you work with stay on your device.