How to set border radius of some corner only with CSS

Question

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

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

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

Either use border-radius, such as:

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

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

border-top-left-radius: 5px;