0

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?

Improve this question
3
  • 1
    What was wrong with exporting a png from ai? Do you gave screenshots?
    – Hanna
    Jan 7, 2016 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, 2016 at 11:08
  • Oh alright, I didn't get that from your question at all, thanks for clarifying.
    – Hanna
    Jan 12, 2016 at 15:05

2 Answers 2

Reset to default
2

  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).

Improve this answer
3
  • 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, 2016 at 1:02
  • Thanks. This doesn't seem to work me though, it still gives a white background.
    – the other one
    Jan 12, 2016 at 11:07
  • Are you exporting as a 24-bit PNG with transparency? And how are viewing the PNG after exporting?
    – Cai
    Jan 12, 2016 at 11:10
-1

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! :)

Improve this answer
5
  • How exactly do you export an Illustrator file to CSS?
    – Cai
    Apr 9, 2016 at 12:55
  • Click File > Export and then choose.css format
    – Swordx Khalid
    Apr 9, 2016 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, 2016 at 13:17
  • I edited the answer with the details, thanks for pointing out the mistakes!
    – Swordx Khalid
    Apr 9, 2016 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, 2016 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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