How to make corners rounded only at the top of the border in css?

Question

On my site, I need to make a div so that the rounded corners are only at the top corners. But I do not know how to do this. Can anybody help me?

Answer 1

Brendan's answer is correct, but to get it in other browsers, you have to use this:

-moz-border-radius: 0px; -webkit-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px; 

Answer 2

 border-top-left-radius: 3px; border-top-right-radius: 3px; 

Answer 3

Other answers are correct, but there is an abridged solution:

 border-radius: 3px 3px 0 0; 

which will cover only the upper corners and leave only the lower ones. The clockwise order is upper left, upper right, lower right, lower left.

Here is an example: http://jsfiddle.net/9sXWf/