CODEWITHSUNDEEP
htmlcss
Aakash Jain
Aakash Jain

Reputation: 760

Create half vertical oval using css

I am trying to create an vertical semi oval shape using css. I am using the following code to create a full vertical oval

#oval {
    width: 100px;
    height: 200px;
    background: red;
    -moz-border-radius: 50px / 100px;
    -webkit-border-radius: 50px / 100px;
    border-radius: 50px / 100px;
    position: relative;
}

but I want to create it as only left part of this oval(like a 'D') I trie using the following code but it gives me blunt edges.

#oval2{
    height:200px;
    width:50px;
    border-radius: 0% 100% 100% 0%;
    -moz-border-radius: 0 100% 100% 0;
    -webkit-border-radius:  0 100% 100% 0;
    background:green;
}

I want sharp edges as in a full oval . How can I achieve the same

Upvotes: 3

Views: 3075

Answers (3)

NDK
NDK

Reputation: 1

Use the following code ,it will be helps you:

#oval {
width: 70px;
height: 100px;
background: red;
position: relative;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}

Upvotes: 0

Mathias
Mathias

Reputation: 5672

It seems you can't use percentages to achieve (at least not for now) this but as long as you know your dimensions you'll be fine. You can do it like this: jsFiddle

#oval2 {
    height:200px;
    width: 50px;
    border-top-right-radius: 50px 100px;
    border-bottom-right-radius: 50px 100px;
    background:green;
}

The W3C spec. indicates that border-radius: 100% should work as you'd like but it doesn't in chrome W3C spec.

Upvotes: 0

Theraot
Theraot

Reputation: 40200

Like so:

#oval {
    width: 50px;
    height: 200px;
    background: red;

    border-bottom-right-radius: 50px 100px;
    border-top-right-radius: 50px 100px;

    position: relative;
}

Note: I have set the properties of the corners independently as explained in the article: Border-radius: create rounded corners with CSS!.

See Demo.

Upvotes: 1

Related Questions