CODEWITHSUNDEEP
htmlimagecssbordercss-shapes
Luke Hargraves
Luke Hargraves

Reputation: 103

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

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!

Upvotes: 9

Views: 30784

Answers (2)

Steeve Pitis
Steeve Pitis

Reputation: 4443

Have you really tryed something ??

#test {
  width: 200px;
  height: 280px;
  border: 1px solid;
  border-radius: 50%;
}
<div id='test'></div>

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128766

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.

Image from the specification

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>

Upvotes: 22

Related Questions