CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152667

How to get angled corner like this in CSS, it's not round?

How to get angled corner like this in CSS, it's not round?

I tried with for left side (Example) but it's not giving the same effect

border-bottom-left-radius: 12px;
    border-top-left-radius: 3px;

enter image description here

Upvotes: 1

Views: 1139

Answers (3)

buhbang
buhbang

Reputation: 715

by looking at http://www.css3.info/preview/rounded-border/ I would think it would be

border-bottom-left-radius : 50px 100px;

border-bottom-right-radius : 50px 100px;

Upvotes: 0

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

Something like this

border-bottom-left-radius:20px 60px;

Upvotes: 2

Dave
Dave

Reputation: 29121

This is a perfect page for your question - it explains in detail (with photos too) how to get different curves using different CSS, including one like your question's pic:

http://www.css3.info/preview/rounded-border/

The one that looks most like yours (imo) is:

#Example_C {
    height: 65px;
    width:160px;
    -moz-border-radius-bottomright: 25px 50px;
    border-bottom-right-radius: 25px 50px;
}

Upvotes: 5

Related Questions