1

When I create rounded rectangles in Photoshop, I can mask images over those rounded rectangles to give them rounded corners.

When I'm making websites however, I'm not sure how to give images rounded corners.

I don't know how to use vector masks on website, do you think it's the right solution? Please, if anyone can provide me with a tutorial or anything I will be very thankful.

Online example:

enter image description here

Improve this question

3 Answers 3

Reset to default
4

This effect is made with CSS.

Simply add a border-radius attribute to your image to make it have rounded corners.

Example:

img {
border-radius: 10px;
}

(That would apply it to all images)

Here is a live example you can play around with.

Improve this answer
6
  • So in the psd file when i design the interface i should not put any thing in my considerations , because i want the tumbnails to be rounded rectangle !!
    – ahmed amro
    Commented Jan 20, 2013 at 4:33
  • When designing the interface in Photoshop, just use what you're used to (use masks to do rounded images), but then when you implement that design to a webpage, use the CSS attribute.
    – Hanna
    Commented Jan 20, 2013 at 4:40
  • This answer is spot on but however let me tell you one more thing, you can not achieve rounded corners easily in css for IE all other modern browser will act accordingly but IE will need more efforts.
    – Jack
    Commented Jan 21, 2013 at 7:33
  • Johannes : Thank you , what i do is select " Rectangle tool " > Create shape > select rounded rectangle > Subtract (-) the rounded rectangle shape from the rectangle shape Simply the rectangle box is subtracted by Rounded rectangle box and then i put the image under this layer so it looks with rounded corners. this the only way i know ... the problem i have to resize the pictures so they dont appear on the sides please see this image img546.imageshack.us/img546/6223/webdesign2s.jpg is this good way for CSS or there is a better way , if you dont mind please send me a tutorial.
    – ahmed amro
    Commented Jan 22, 2013 at 15:49
  • is there any problem how i make it ? or it doesnt matter because its all in CSS hands not photoshop ones? whats the optimum way to make it if yes or no ?
    – ahmed amro
    Commented Jan 22, 2013 at 15:54
0

You can also use timthumb so you dont have to worry about exact image sizes for your rectangles, and then use Johannes tip above for the rounded corners.

http://www.binarymoon.co.uk/projects/timthumb/

Improve this answer
0

I realize your question is really pertaining to CSS3 border-radius, but I thought I would drop this link to PolyClip, which allows you to create vector masks in a web browser. Makes it so you can use a much small JPG file and a clipping path instead of a large PNG file with alpha transparency. So if you're looking to clip images more complex than rounded corner boxes, this would be the route to go.

Improve this answer
2
  • Hey JamEs , the problem i am not a css expert , all what i need to do is just to handle a photoshop psd files to developer as i am outsourcing person and good with photoshop So i dont know if the rounded corner frames should be done in the psd file or just show him its rounded corners and he do it with css !! 2- the user thumbnails is also rounded corners , when i saw for example twitter gui psd , i see him made it grey mask vector with rounded corners, which i dont know if i should do this,because i dont know how to make rounded corners frames that fit to css . i can just do it in general
    – ahmed amro
    Commented Jan 22, 2013 at 15:35
  • Use the rounded corners in photoshop to show what you'd like your web person to recreate, then they can create the rounded corners using code. If you are coding the site and not familiar with how to output the code, I suggest something like border-radius.com that would allow you to create the box you want visually, then output the code for you to copy and paste into a stylesheet.
    – jbwharris
    Commented Jan 22, 2013 at 19:33

Your Answer

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

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