In this short tutorial, we are going to show you how to make perfect elliptical borders with simple CSS3 tools.

To make the elliptical border we use the CSS3 property called border-radius. The border radius property is a shorthand property for setting the four specific properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

To make the elliptical border you should set the value for border-radius to be 50%.


Example of elliptical borders in CSS with border-radius and background-clip property:


›› go to examples ››