How to make elliptical borders with CSS3

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

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

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box-elliptical {
    margin:20px auto; padding:2%;
    width:300px; height:150px;
    border:#c2c555 solid  4px; border-radius: 50%; 
    background:url('../../../img/tutorials/css3.png') center fixed no-repeat #e2e555;
    background-clip: content-box;
    /* ADD proprietary selectors if needed */
  }
div {
    font-family:Arial;
  }
</style>
</head>
  
<body>

<div id="box-elliptical">
</div>
<div>
  To contain the background image we used the property 
  <strong>background-clip: content-box;</strong>
</div>

</body>
</html>

›› go to examples ››

How to make elliptical borders with CSS3

Example

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

Comments

About

Contact

Get Connected