What is the 8-value elliptical syntax for?

border-radius accepts a horizontal radius and a vertical radius per corner, separated by a slash: "50px 20px / 10px 30px". This lets each corner be a quarter-ellipse instead of a quarter-circle, which is how you get squircle-like shapes.

Why is my rounded corner clipping my child image?

border-radius clips the element box but child images render on top by default. Set overflow: hidden on the rounded container or apply the same radius to the image.

Can I use percentages?

Yes. 50% on every corner of a square element gives you a perfect circle. Percentages are relative to the element size, so they respond to layout changes automatically.

Border Radius Previewer

Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live and copy the CSS.

Top Left

Top Right

Bottom Right

Bottom Left

Preview◇

CSS

border-radius: 16px;

3 Tools · See Also

02·CSS
Box Shadow Generator
accent · #555A6B
Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
02·CSS
Clip-Path Maker
accent · #0EA5E9
Draw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.
02·CSS
Gradient Generator
accent · #E91E63
Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.

✱ Privacy◇

Runs in your browser.

Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.

Local-only

Border Radius Previewer

Related Tools