sharp edged to rounded borders using css?

Question

I am trying to create a div element with a rounded border. I am aware of the use of the border-radius, but I noticed that using this property will curve the corners only, like the top-right, top-left etc. so i was wondering if there is some property to curve the side of a div element, something like border-radius for top, down, left and right.

For example, a div with a straight top, bottom and left but a rounded right side. i would like to create the right side so that it is more rounded at the top than the bottom.

My aim is to create a div element with rounded right side which will not affect the top and bottom sides. i mean the curve in the right side should stop as soon as it reached the top or bottom side. (so that the top and bottom remains straight rather than slightly curved).

Is there a way to get this effect using css?

Answer 1

You can specify horizontal and vertical border-radii via the slash notation to achieve such an effect...

div{
    width:100px;height:100px;
    border:3px solid #bada55;
    border-radius:10px/50%;
}

<div></div>

This would set a vertical border-radius of 50% and a horizontal border-radius of 10px for all sides. You can define this for each corner individually (So you have up to eight values).