0

I have an element where the top-left and bottom-right corners have a border-radius of 5 and I'm trying to make it compatible with CSS3PIE. The documentation states that

Only the shorthand version is supported; the longhand border-top-left-radius etc. properties are not. The shorthand syntax does support different radii per corner, though. link

But in the example they display exactly that ...

border-radius: 5px 10px 15px 20px;

How can I display an element that has corners with different radii in IE8?

Thank you.

a.navLink {
       -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
            border-radius: 5px 0 5px 0;
    display: block;
    behavior: url('http://mydomain.com/css/PIE.htc');
    position:relative;
    z-index: 0;
Tiny
  • 209
  • 1
  • 6
  • 18
  • I'm confused, you quote the documentation saying how to do it, but then ask how to do it? Are you saying it does not work for you? I can tell you it does. – lojjic May 30 '12 at 03:02
  • Yes. It doesn't work for me. With this only the top-left corner has a radius. – Tiny May 30 '12 at 08:47

1 Answers1

1

add the -pie- prefix:

-pie-border-radius: 5px 0 5px 0;
Inkbug
  • 1,682
  • 1
  • 10
  • 26