Last Updated: February 25, 2016
· 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.

Have a fresh tip? Share with Coderwall community!

Post a tip
Related Tags