I created a logo in Illustrator CC and after I 'Save for Web' using PNG-24 with a transparent background and put it in my website html there is a thin white stroke around the logo. This is definitely not a html problem but an issue with exporting with illustrator.

I definitely have not got a white border on the image in illustrator. It does not show up when I preview the image in Windows but does in my HTML. Im not using any CSS either.

  • Is your used page wider than the image? Then you would get a white border ... – Mensch Nov 16 '14 at 17:17
  • I had the same problem with a background that completely covered the artboard, both pixel-perfect. I tried the rest of the solutions, and the only thing that worked was to export it to a higher resolution and then resize it in Photoshop. – DanielBlazquez Mar 31 at 9:59

My bet is that your artboard isn't aligned to the Illustrator pixel grid. Try going to the artboard tool:

Artboard Tool

Then in your toolbar, verify that your artboard's X, Y, Height, and Width are all whole pixel numbers (no decimals!).

Artboard Properties

Be sure to select a corner point and not the center. We want each edge of your artboard to land perfectly on the pixel grid.

If they were already whole pixel numbers, this probably won't make any difference, but if they were, change them to whole pixels, then double check that your artwork still fits ok, and then try Save for Web again.

| improve this answer | |
  • This was almost my solution. Rather than the artboard, my issue was the elements themselves. During resize some of them had gone from whole pixels to partial pixels. (Like a 200 x 200 turning into a 100.00 x 100.01). I'm not sure why it was adding extra partial pixels, but manually removing them fixed it. – user51095 Sep 17 '15 at 14:29

This still make the artwork shift some times ive noticed when you use "align to pixel grid". I got it fixed by double clicking on the artboard. This will shift to the correct pixel, this is handy when you have a backdrop perfect matched to artboard size

| improve this answer | |
  • Welcome to GDSE. If you want to know more about the site, please see the help center. Keep contributing and enjoy the site! – Luciano Mar 9 '16 at 17:20

I had the same issue when saving as "PNG-8". You could try making sure you select preset "PNG-24" in the Save for Web dialogue box (top right). My problem was solved when I did this.

| improve this answer | |
  • Hi @Zemogle, welcome to GDSE and thanks for contributing. Although your answer is indeed a common root cause of white borders in PNGs the question specifically mentions using PNG-24. – PieBie Oct 25 '16 at 6:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.