Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

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.

share|improve this answer
    
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 Jan 20 '13 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. –  Johannes Jan 20 '13 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 Jan 21 '13 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 Jan 22 '13 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 Jan 22 '13 at 15:54
show 1 more comment

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/

share|improve this answer
add comment

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.

share|improve this answer
    
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 Jan 22 '13 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. –  jamEs Jan 22 '13 at 19:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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