I'm having an issue where PIE is slightly scaling up images and therefore making them blurry.

I checked the forums, and the only other post mentioned a problem if the border width is greater than the border-radius, but in every case I have a 1px border and a 4px border-radius.

It's happening on every image that pie is working on - and rounded corners are used extensively throughout this site at the client's request - everything from featured post images, custom post type image galleries - even my gravatar images. Everything is scaling up slightly and creating the blur.

The development site is here: clients2.xigko.com

You can look at any of these links and you'll see the problem:
http://clients2.xigko.com/fishing/key-west/
http://clients2.xigko.com/articles/fishing-reports/
http://clients2.xigko.com/florida-keys- ... -calendar/
and anywhere else really

You'll see the page load, and then see the images scale up around maybe 3 to 4 pixels I'm guessing?

I'm pretty frantic on this, as the site is about 10 days from going live. If I have to completely redesign IE, and explain this to the client, I need to do it quickly - but it can't stay the way it is.

Looks like this is a bug having to do with the padding. While your border is less than the radius, your padding is greater, and it triggers the same shape calculating bug.

I can think of a few possible workarounds:
- Increase the border-radius to 5px so it matches the padding width. The difference probably isn't noticeable, but if you want to do it in PIE only you can use -pie-border-radius to override it.
- Alternatively, decrease the padding to 4px.
- Put the border and padding on the surrounding <a> rather than on the <img>
- Switch the padding and border to outset box-shadows instead, as in Method 3 on http://www.impressivewebs.com/multiple-borders-css/

I think I found the problem, but it's not what I was hoping for.

All the images are set with a 1px solid grey border, and then a padding of 5px. That created the white border, but left the inside image with a slight border.

With Pie, this config makes the images scale up for some reason. I've tried setting the padding and border radius the same value - no change.

I'm going to remove the border-radius from all these images, as it's the only solution to make my deadline, but I'd love to know if there is a way to not have this scale up / blur happen for future sites.

Hmm, perhaps it's the padding *plus* border together that have to be <= the border-radius.
*edit* yeah looks like border-radius:6px sharpens the image back up.

Anyway, did any of my other suggestions help?

For what it's worth this bug should be fixed in the current master branch (2.0 code line), but I'd only recommend trying that if you're adventurous.

Hi Jason,

I'd like to try that 2.0 code line on another test site, but I couldn't seem to find the download for that one. Could you point me to the right place?

No download yet, you'll have to pull from GitHub and build it yourself. You should be able to follow the build steps at http://css3pie.com/documentation/buildi ... om-source/

There is also an extra undocumented step that you'll have to do for the time being -- see my comment at https://github.com/lojjic/PIE/issues/18 ... nt-2797468