Can I make an ellipse using the CSS border-radius property?

Question

I'm trying to make a rectangular image (headshot)

width: 200px;   
height: 280px; 

display as an ellipse.

I can't seem to stop it trying to make a circle, or forming points at top and bottom, while the sides are still flat.

Any help appreciated!

Solution 1

As per the specification, the individual border-radius properties accept a second value which if not specified defaults to whatever the first value is.

3.3 The 'border-radius' properties

The two length values of the 'border-radius' properties define the radii of a quarter ellipse that defines the shape of the corner (see the diagram below). The first value is the horizontal radius (or vertical if the 'writing-mode' is vertical). If the second length is omitted it is equal to the first (and the corner is thus a quarter circle). If either length is zero, the corner is square, not rounded. The border radius also causes the element's background to be rounded (even if the border is 'none'). Negative values are not allowed.

You can use this to specify exactly where you want the radius to occur:

div {
  background: red;
  width: 200px;   
  height: 280px; 
  border-bottom-left-radius: 50% 25%;
  border-bottom-right-radius: 50% 25%;
  border-top-left-radius: 50% 25%;
  border-top-right-radius: 50% 25%;
}

<div></div>

An ellipse would use 100% for either the first or second value, but a value less than 100% for the other:

div {
  background: red;
  width: 200px;   
  height: 280px; 
  border-bottom-left-radius: 25% 100%;
  border-bottom-right-radius: 25% 100%;
  border-top-left-radius: 25% 100%;
  border-top-right-radius: 25% 100%;
}

<div></div>

Solution 2

Have you really tryed something ??

#test {
  width: 200px;
  height: 280px;
  border: 1px solid;
  border-radius: 50%;
}

<div id='test'></div>

Comments

[que1326]

Fallback for clip-path !! Thank you for the reply !! Cheers !!