Reputation: 41
How to style a rectangular div with elliptical rounded sides?
Upvotes: 1
Views: 767
Reputation: 64264
You can get an ellipse by setting border-radius 50%.
You can get two elements, one inside the other, with different sizes, and so get the 2 ellipses needed
.test {
position: absolute;
left: 40px;
top: 40px;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: -30%;
top: 10%;
width: 160%;
height: 80%;
background-color: lightblue;
border-radius: 50%;
}
In this case, using an pseudo element , and so, only one div is needed
Upvotes: 2
Reputation: 437
Have you checked out this website? Try this:
div
{
border:2px solid;
border-radius:25px;
}
Upvotes: -1