CODEWITHSUNDEEP
htmlcss
luxi
luxi

Reputation: 317

How to set border radius of some corner only with CSS

Enter image description here

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?

Upvotes: 4

Views: 4988

Answers (3)

hrr
hrr

Reputation: 1651

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;

Upvotes: 3

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 9

ArleyM
ArleyM

Reputation: 853

Here's the CSS for the rounded corners only on a div with a class of box:

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

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

Edit: Apparently you don't need the webkit prefix anymore!

Upvotes: 1

Related Questions