CSS Elliptical Corners

Create Elliptical Corners on a DIV

CSS logoIf you would like to create elliptical corners on a div, you can accomplish this with CSS3. Most new browsers will recognize elliptical corners, available with CSS3. However, browsers not recognizing CSS3 may appreciate -webkit variations (the -mos-border-radius does not support elliptical corners).

In each case, there are 2 parameter to the border radius declaration. That is:

  • param 1: The horizontal radius.
  • param 2: the vertical radius.

Create Selected Elliptical Corners

If you would like to create elliptical corners on selected corners, there is an option to handle this situation. This is available in CSS3, and special case options for old -webkit browsers.

The parameters are the same as the standard border radius, but affects only the selected corner.”

Leave a Reply