Last Updated: February 25, 2016
·
1.447K
· benorudolf

CSS Ellipse

Don't waste time trying to fake an ellipse with pixel or em based border radius. Use percentages to get elliptical curves.

.ellipse {
    border-radius: 50%;
}

A value of 50% gives a complete ellipse - any higher value will not make any difference.

By using percentages the curves aren't limited to the corners, but actual go from the vertical midpoint to the horizontal midpoint.