Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Border-radius bug on <a> in IE9

Tags:

Seeing that <div> elements render border/border-radius correctly, but any <a> or <button> that has a background, border and border-radius set shows the background color or image as a square, and only the border is round. Tried setting <a> & <button> to display: block or display: inline-block but that didn't work.

Is there a known workaround?

Here is a link to the computed style from Webkit: https://gist.github.com/773719

alt text

Here is the computed style from IE9 dev tools: alt text

Update Using the filter:; or -ms-filter:; property to have gradients in IE make the background break out of the defined border-radius.