1

I'm applying border-radius for a few elements on my page, and in order to make it work on IE 6-8, I'm using PIE.

Check it out

weirg bug o.O

So as you can see, corners without values (or with values very different from each other) for border-radius, effect gets this weird.

Here's my code:

.cotacao {
  -webkit-border-radius: 1px 20px 1px 20px;
  -moz-border-radius: 1px 20px 1px 20px;
  border-radius: 1px 20px 1px 20px;
  border: 10px solid #fff;
}

And specific code for IE

.cotacao {
  behavior:url(/Assets/css/common/PIE.htc);
  position: relative !important;
}

What's going on? Is this bug related to the border thickness? And, if it is, is there a known workaround? Thanks!

Laryssa Rocha
  • 45
  • 6

1 Answers1

0

This is a bug in the PIE 1.0 code. See https://github.com/lojjic/PIE/issues/11

It's fixed in the 2.0 beta if you're willing to try that.

lojjic
  • 791
  • 5
  • 7
  • Thanks. If I can help anyone else, to create this effect, i have rounded all corners with same value and, in order to make top-left and bottom-right square, I used :before and :after with background images. Crappy, but it works. – Laryssa Rocha Aug 29 '13 at 18:26