CODEWITHSUNDEEP
css
Stephan Muller
Stephan Muller

Reputation: 27620

CSS3 border radius + different border width, ugly transition

I got another tricky CSS3 situation that I'm breaking my head on. I'm styleing a form with CSS to have a 10px border on the sides and a 12px border on the bottom, in combination with a 15px border radius.

Unfortunately, the point where the 12px and the 10px borders meet the transition is not gradual but there's a 2px chunk sticking out of the inside of the border. Example (sizes magnified for clarity):

http://jsfiddle.net/LnKND/1/

Any idea how to fix this using only css and no extra elements? Or is this just the way it's rendered currently and should I find another solution?

Upvotes: 2

Views: 2936

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196217

Add 

    border-bottom-left-radius:10px 20px;
    border-bottom-right-radius:10px 20px;

reference : http://www.w3.org/TR/css3-background/#the-border-radius

for mozilla use

    -moz-border-radius-bottomright
    -moz-border-radius-bottomleft

if you want, although it handles the issue automatically (if you fix the typo p to px in the example).

reference: https://developer.mozilla.org/en/CSS/border-bottom-right-radius

Upvotes: 2

Related Questions