I'm building a website. For part of this website I want to have a picture that has rounded corners.

If I insert the picture normally then it will remain rectangular- the rounded corners being ugly white corners around the image that show up really obviously against the web page's background.

I could of course use some simple css and do border-radius: x;.

But this is graphic design, not web design. I'm wondering whether it is possible to do something within my graphics program to create truly transparent corners?

Following the cheat route of simply painting the corners the colour of my background is also not an option (assume I have a gaudy multi coloured background where the position of the image is open to change).

Unfortunately I only have illustrator and not photoshop which may limit my options here but I do wonder whether it is possible at all?

  • 1
    What was wrong with exporting a png from ai? Do you gave screenshots? – Hanna Jan 7 '16 at 15:06
  • I think the problem is complicated in that this isn't an image created in illustrator from scratch but rather a pre-existing image from god knows where that I'm editing. – the other one Jan 12 '16 at 11:08
  • Oh alright, I didn't get that from your question at all, thanks for clarifying. – Hanna Jan 12 '16 at 15:05
  1. Draw a rounded rectangle over your image, with the corners set to the radius you want, in the position you want.

  2. Select the image and the rectangle and go to Object → Clipping Mask → Make

  3. Export as a 24-bit PNG.

It should be noted that PNG isn't best suited to photographs and you will probably end up with a much bigger file than a JPG.

What you should really be doing is using a JPG and CSS for the round corners (as you said).

  • Great point about the unsuitableness of PNG to photographs. It's worth point out that this is plays out in terms of file size, and that a JPG is a much better format for photos. – aaaidan Jan 8 '16 at 1:02
  • Thanks. This doesn't seem to work me though, it still gives a white background. – the other one Jan 12 '16 at 11:07
  • Are you exporting as a 24-bit PNG with transparency? And how are viewing the PNG after exporting? – Cai Jan 12 '16 at 11:10

Try exporting the ai file as .css through File > Export and select the save as type to be CSS and then you'll receive a .css file with all of the code that you can use for your website! :)

  • How exactly do you export an Illustrator file to CSS? – Cai Apr 9 '16 at 12:55
  • Click File > Export and then choose.css format – Swordx Khalid Apr 9 '16 at 13:07
  • You should explain that in your answer. I use Illustrator daily and have done for years and I never knew this existed. – Cai Apr 9 '16 at 13:17
  • I edited the answer with the details, thanks for pointing out the mistakes! – Swordx Khalid Apr 9 '16 at 13:33
  • I'm currently away from my pc but you can click File > Export and then change the save as type to CSS – Swordx Khalid Apr 11 '16 at 11:40

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.