How to set the border radius of a certain angle using CSS only

Question

As shown above, can I give a radius only to the upper parts, and not from the bottom, and sometimes from the bottom to the top?

And is there any idea to give the border radius to just one corner?

Answer 1

Like border-radius:top-left top-right bottom-right bottom-left ,

 div{ width: 100px; height: 30px; background: black; border-radius: 8px 8px 0 0 } 

Demo

Answer 2

Use a border radius, for example:

 border-radius: 5px 5px 5px 5px; 

Or, for the upper left border, you can be more specific:

 border-top-left-radius: 5px; 

Answer 3

Here is CSS for rounded corners only on divs with class box:

.box { border-radius: 5px 5px 0px 0px; }

You may also find this useful: http://css3generator.com/

Edit: Apparently you no longer need the webkit prefix!