CODEWITHSUNDEEP
css
Rabbia Annum
Rabbia Annum

Reputation: 41

How to style a rectangular div with elliptical rounded sides?

How to style a rectangular div with elliptical rounded sides?

Rectangle with elliptical rounded sides

Upvotes: 1

Views: 767

Answers (2)

vals
vals

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

demo

Upvotes: 2

Matt
Matt

Reputation: 437

Have you checked out this website? Try this:

div
{
border:2px solid;
border-radius:25px;
}

Upvotes: -1

Related Questions