Can I make an ellipse using the CSS border-radius property?
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>
Have you really tryed something ??
#test {
width: 200px;
height: 280px;
border: 1px solid;
border-radius: 50%;
}
<div id='test'></div>