Course Technology Cengage Learning New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4

Elliptical Corners

To apply elliptical corners to a CSS border, apply the following border-radius style:

border-radius: horizontal / vertical

where horizontal / vertical are the radii of the corners in the horizontal and vertical direction. To apply a different ellipse to each corner enter the radii in a space-separated list.

Use the web form below to generate the CSS code for applying elliptical corners to the four corners of the border in the preview box.

Elliptical Radii

Top-Left

0px 150px
0px 150px

Top-Right

0px 150px
0px 150px

Bottom-Right

0px 150px
0px 150px

Bottom-Left

0px 150px
0px 150px
border-radius: 60px 60px 90px 90px / 110px 110px 30px 30px;