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 · See also

02·CSS

Box Shadow Generator

Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.

02·CSS

Clip-Path Maker

Draw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.

02·CSS

Gradient Generator

Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.

Runs entirely in your browser.

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

Border Radius Previewer

Related Tools