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;

Box Shadow GeneratorLayer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
Clip-Path MakerDraw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.
Gradient GeneratorBuild linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.

Border Radius Previewer

Related tools