Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS border-radius generator
Adjust linked or independent corner radii, preview elliptical corners and export border-radius CSS.
Elliptical corners
Preview
CSS
About this tool
Shape a button, card or badge while comparing circular corners with elliptical ones.
How to use
Choose px or %, then use sliders or numeric inputs to adjust all four corners. Corners are linked initially; unlink them to edit each one separately. Enable separate vertical radii in the elliptical controls to set horizontal and vertical curvature independently.
Values range from 0–500 px or 0–100%. Copy or download the same border-radius declaration used in the preview. Percentage radii depend on the target element’s dimensions. Switching units changes how the numbers are interpreted and does not preserve an equivalent visual size.
Common questions
What does the slash in border-radius mean?
Values before the slash control horizontal radii; values after it control vertical radii. CSS scales overlapping corner radii proportionally to fit the box.
Why does 50% make an oval instead of a circle?
Percentage radii use the element’s width and height separately. At 50%, a rectangular box becomes an ellipse; a circle needs equal width and height. Use pixel radii when you want a fixed corner curvature, and check the CSS on your element’s actual dimensions.
Related tools
Opens in a new tab
Comments
0