Using Paths to create smooth, rounded corners in Photoshop
Posted by Matt Thommes on 10/11/05 in Software, Tutorials
Smooth, rounded corners in Photoshop is a typical desired effect, but one that is difficult to achieve for many beginners.
Rounded corners can actually be implemented rather easily. The trick is to use pre-defined shapes, and simply contain your artwork within those shapes.
Photoshop CS comes with some basic pre-defined shapes that will help create smooth, rounded corners.
First, we start off with our image:
To create rounded corners, we will use the Rounded Rectangle Tool. This will allow us to specify the radius of each corner - in a consistent fashion.
Select the Rounded Rectangle Tool from the Tools:
With the Rounded Rectangle Tool selected, use the Options menu to change the radius of the corners. You can specify any number - the smaller you go, the less noticeable your rounded corners will be.
Once the Radius is set, keep your eye on the Options menu. To the far left, you’ll see three small options that affect how your Rectangle will be drawn.
The one we want is the first one. This one is called “Shape layers,” and it allows us to select our rectangle, later on, and include whatever is inside of it. (This should automatically be selected, by default.)
With our Options set, draw the Rounded Rectangle on top of the artwork. Remember, everything inside the rectangle will be included.
To get rid of the fill color, go to the Layers palette, and drag the Fill slider down to 0%.
Now, go to the Paths palette, use the arrow in the upper right corner, and select Make Selection.
In the Make Selection dialog box, leave the settings as is: Feather Radius at 0 pixels, Anti-aliased checked, and New Selection highlighted.
You should notice your rounded rectangle turn into a selection.
Now, go to “Edit” > “Copy Merged,” create a New Document, and Paste what you just copied.
You’ll notice the photograph goes right up to the border of the artwork file, which is slightly hiding the rounded corners. Simply extend the canvas size, to reveal the corners, or increase the canvas size by a few pixels before you paste your image. You can change the background color in case the photograph is blending in with the white.
permalink | trackback url | 
Subscribe in a reader
Similar Posts
- Rounded corners in Photoshop Elements
- Creating Rounded Corners with GIMPShop
- Basic Tips for New Mac Users
- Photoshop upgrade tips: CS to CS2
- Fetch iTunes artwork with Clutter
Anonymous | Oct 18, 2005 | Reply
How about a writeup for GIMP?
Melissa Della | Oct 18, 2005 | Reply
Hey, I just wanted to thank you for this tutorial. I’ve been trying to figure out how to get a nice rounded border, and I found this entry via Google; I was able to translate your steps to Photoshop 7.
Matt Thommes | Oct 26, 2005 | Reply
A writeup for GIMP is certainly possible. Thanks for the idea.
Andy Atkinson | Nov 13, 2005 | Reply
Done!
Creating Rounded Corners with GIMPShop
Julius Y | Nov 20, 2005 | Reply
Hi,
Thank you for the great tutorial!!! I struggled all day trying to figure out a way to do that using Photoshop 6.0. Your tutorial made it so easy. Found you on Google.
Julius
Daisyhead | Jan 19, 2006 | Reply
Thank you so much for this tutorial! I am learning how to create my own graphics and have a quick question.
As an example, is there a way to add a border around the image of the trees above?
Matt Thommes | Jan 20, 2006 | Reply
Hey Daisyhead, thanks for the comment. Adding a border is relatively simple. After you copy/paste the selection into a new document, just go into layer properties (Layers palette, double-click layer), and you should be taken to a dialog box, where you can add drop shadows, borders, gradients, and much more.
Yash | Jan 21, 2006 | Reply
Dear Matt
I read your on the paininthetech.com was great help! Took me ages to find a solution. Thanks again man!!!you are an star!!!
Mark | Feb 24, 2006 | Reply
Wow, that was easy and yet I wouldn’t have worked that one out in a million years. Thanks folks.
Tomislav Chagall | Mar 14, 2006 | Reply
matt,
you are indeed a star: it is easy when you know how. much respect.
Vince | Mar 19, 2006 | Reply
This is excellent as everyone agrees. I would suggest doing more as your style of writing and commuication simplifies for many people. How about doing 3-5 more on other Photoshop related topic…even Fireworks?
brian | Mar 26, 2006 | Reply
Quick question: How do I add a border with rounded edges to a picture that I want to keep perfectly squared?
Matt Thommes | Mar 27, 2006 | Reply
Not sure what you mean, exactly. You can keep your “squared” picture untouched by the rounded-rectangle tool, by simply drawing the rounded-rectangle OUTSIDE of the actual picture, so that it’s not touching the picture itself. Hope that helps.
Stephanie | Mar 27, 2006 | Reply
This is without a doubt the simplist version I have seen for making rounded corners. And I’m glad that it works in more than just CS. Thanks so much!
Tess | Apr 2, 2006 | Reply
Hi hoping someone can help me. I made some images with rounded corners with the above instructions(thankyou) but they will only open with photoshop elements? (I am using a trial version) I would like to use them in my website but cant get the images to open with anything else.
I am really stuck as never used photoshop before
Thank you
Tess | Apr 2, 2006 | Reply
I managed to do the above.
Thankyou
ibit | Apr 12, 2006 | Reply
Thanks! You made this so easy.
Chris | Apr 19, 2006 | Reply
You rock!
No longer will i fear rounded corners!
Neeraj Shukla | Apr 23, 2006 | Reply
Its really worthy help available through this page. I really need something to get corped my image with rounded corners. Thanks a lot for this.
Neeraj
Henry | May 13, 2006 | Reply
Hmm… How do I save the picture and remove the white bit? I mean when you copy it it’s still a rectengle but the picture is rounded and if I try put it on the web with black or other background colours you can see the white bit. Here’s what I’m trying to say http://www.geocities.com/henryl76/testing.htm
Andy Atkinson | May 13, 2006 | Reply
Henry, there are several ways of accomplishing this. The crudest way would be to fill in your white corners with black color since you are putting the image on a black background. This is not very flexible however. The best thing to do is to save your image in a format that allows “transparency,” such as PNG or GIF. For example, make your rounded corner selection, copy it, then create a new PNG image with a transparent (not white) background. Now when you paste your image in and save it, you will have transparent corners that you can use on any background. Internet Explorer may display “transparent” layers as “gray” though, so for the best compatibility, stick with the GIF format. Hope that helps.
Henry | May 13, 2006 | Reply
Andy thanks for the quick reply and help
Matt Thommes | May 14, 2006 | Reply
Exactly… and even further - more importantly, your “copied” image (the one with the rounded corners) will end up on it’s own layer, when you paste it into the new document. So, all you have to do is change the color of the “Background” layer (the layer BELOW your rounded corner image) to match your web page colors, or… like Andy said, make the “Background” layer transparent, and then save it out as a transparent GIF.
thos | May 18, 2006 | Reply
Much gratitude to contributors for this clear and simple solution to a prob that has frustrated me for some weeks. Ar fheabhas ar fad! From one very satisfied Thos.
Greg | May 21, 2006 | Reply
I’ve wrestled with this for a week and was on the verge of giving up. THANK YOU so much. You’d think it would be so clear in the help section.
Joan | Jun 24, 2006 | Reply
I’ve spent over 2 hours trying to find the answer to this. I couldn’t get it to work with the 7 other tutorials I tried. This was very easy to follow and actually worked. I wish I would have found this site first. Thanks for making this information available.
Anonymous | Jun 28, 2006 | Reply
Ok, based on everyone’s comments I feel like a real tool that I couldn’t get this to work. Everything goes smoothly up to the final copy and paste step. When I paste into a new document I don’t see the rounded corners, it is like the selection reverts.
Ali
Ryan | Jul 3, 2006 | Reply
This tutorial worked out great but the only problem is after i saved it as a GIF, I put it on my page and it still has the rectangle with the white background. Any ideas? Thanks.
Matt Thommes | Jul 3, 2006 | Reply
Ryan, see the thread above, starting with this comment. That should answer your question. Thanks!
Ryan | Jul 3, 2006 | Reply
Oh I’m sorry. I didn’t see that. Thanks.
Ryan | Jul 3, 2006 | Reply
Well.. I saved the rounded image as a GIF but when it comes up on my page (myspace), it has the white background.
Here’s the page. Under my friends section the first and last pictures are supposed to be rounded but are not.
here.
Matt Thommes | Jul 3, 2006 | Reply
Make sure, in Photoshop, the layer below your “rounded corner” layer is transparent. Then, choose File, Save For Web, and make sure Transparency is checked, and GIF is the output format. Give that a shot, and let us know.
Anonymous | Jul 5, 2006 | Reply
Worked like a charm! Thanks much!
Yadav | Jul 12, 2006 | Reply
I was searching all over the web to get a solution for this… finally.. only yours worked… thanks a lot.
Hannah G. | Jul 31, 2006 | Reply
Just wanted to add my .02 that this was THE BEST article I found on how to do rounded corners in Photoshop. The screen shots made ALL the difference and I got it completed in about 2 minutes. That was after spending way too long trying to do it myself. Good job!
Anonymous | Aug 8, 2006 | Reply
THANK YOU SO MUCH!!! I LOVE THIS.
Manish Nautiyal | Aug 10, 2006 | Reply
Oh wow this is wonderful whnever i have to use roundcorner thn i use firework but in photoshop this was first time so its gr8 topic
James | Sep 5, 2006 | Reply
I wish you were sitting next to me at my desk to pass on more great tips like this. Anyone wanting to create website’s needs to understand how to design graphics like this! Thanks. Great stuff!
Jim
jim | Sep 5, 2006 | Reply
Great tutorial. Now would it be possible for you to explain how I can use the same theory to produce a graphic with only one or two of the corners being rounded off? For use in a web banner where the top two corners are rounded or in a graphic being placed left or right with that sides top corner being rounded?
Thanks again.
Jim
erika | Oct 2, 2006 | Reply
can’t do it in cs2
“make selection” is not in the list
Anonymous | Oct 8, 2006 | Reply
“explain how I can use the same theory to produce a graphic with only one or two of the corners being rounded off?”
Do everything as outlined above, then CROP it!
Craige | Oct 8, 2006 | Reply
Hi, I followed your instructions exactly, but when I switch to the Paths palette, nothing is listed there. Any ideas why? Thanks!
Matt Thommes | Oct 9, 2006 | Reply
I’m not entirely sure why… As long as you drew the rectangle on a new layer, I can’t see why it wouldn’t appear as a path.
Lil | Oct 17, 2006 | Reply
hi! firstly, thanks for the great tutorial… certainly comes in handy for a dummy like me…
i’ve been using photoshop elements and used cookie cutter to crop for round edges. now i have just started using cs2 so i’m pretty clueless about most of the functions, hence the trouble on getting round edges. with this tutorial, i finally got that sorted but now i have another question. is there a way i can get my pics to be of particular size as i want it to be? i find the current method quite arbitrary and difficult for me to get the exact size that i want…
wiepie | Oct 23, 2006 | Reply
Nice tutorial it was really helpfull
Yolan | Oct 29, 2006 | Reply
I just wanted to say thank you for this tutorial! It was easy-to-use and easy to translate into Photoshop 7 (I know, I know, but it works for me:)
Again, thanks!
Webguy | Dec 1, 2006 | Reply
I like your solution to the problem of rounded corners. But I think it´s possible to make a shortcut:
1) Open the pic you want to have rounded corners on. 2) Select the tool for a rectangle with rounded corners. 3) Make the new layer and draw the rectangle with rounded corners on it. 4) Click the path tab on the new layer with the rectangle. 5) Click the small arrow icon and choose “make selection”.
…so far this is exactly the same as your solution, but now…
6) Select the picture layer. 7) Choose Inverse from the Select menu.
Choose Clear from the Edit menu.
Thats it!
Matt Thommes | Dec 3, 2006 | Reply
Webguy, thanks for the tip. That makes perfect sense. Instead of copying/pasting the rounded corners selection into a new document, you can just clip around the original selection. Select, Inverse allows us to do that.
Very helpful…
Anita | Dec 12, 2006 | Reply
I’ve looked at this, but Photoshop CS does not give a borders option. It’s only drop shadows, bevel and emboss, etc… no borders?
Andy Atkinson | Dec 12, 2006 | Reply
Anita, if you didn’t figure this out already, Photoshop layers properties has an option called “Stroke” that is a border on the edge of your layer. You can adjust the color, where it appears (outside, inside, etc.), the opacity and more. You can play around with Stroke, Outer Glow, and Drop Shadow to get the desired effect. As Bert Monroy said in a recent episode of PixelPerfect, it’s not what the effect is called, its what the effect does that is important.
Eric | Jan 23, 2007 | Reply
I was googling for this technique and I wanted to say thanks for the clear instructions…much appreciated.
Anonymous | Jan 26, 2007 | Reply
http://www.matthom.com/archive/2004/09/10/fast-rounded-corners-in-photoshop
Found the above page first but had trouble (was using Elements and not CS2).
Then saw this one. I knew (from the previous link) to create a new layer for the rectangle, but it’s not noted here. Could be that it’s understood, but for newbies, may need to be spelled out before we “Select the Rounded Rectangle …” IMHO. In any case, I got the job done and am very grateful to you.
Sam | Jan 26, 2007 | Reply
Alright, well this is excellent. I was trying to figure it out myself, and I had it pretty much down except for the no fill part. So thanks… Amazing amazing.
Anonymous | Feb 10, 2007 | Reply
Hail you, Hail Matt Thommes
Erik | Feb 21, 2007 | Reply
Hello.
This tutorial was excellent. I have something like 200 images I would like to have rounded corners on. Is there a way in photoshop to “automate” this process? In other words create something of a script or something which would solve this in “just a few steps” instead of having to add a new image as a new layer into the rounded corners image?
Any and all feedback would be much appreciated!! Thanks!
Matt Thommes | Feb 22, 2007 | Reply
We are working on a Photoshop “action” that can automate parts of this process. Look for the article here, in the coming weeks. Thanks!
Ornis | Apr 1, 2007 | Reply
I’m a newby to Photoshop. I’ve been Googleing for this tutorial for about a week now. I’ve tried a lot of tips from other pros but so far this is absolutely the simplest one. Many thanks Matt.
Anonymous | Apr 3, 2007 | Reply
Thank you ever so much!! I’ve been searching for WEEKS for a tutorial on rounded borders and most of them were absolutely horrible! This one is just what I needed! Thanks!
Indranil | Apr 14, 2007 | Reply
Matt, thank you for this extremely helpful tutorial.
Mr. Nelson | Apr 15, 2007 | Reply
This was a fast and easy solution to my problem! Keep on rocking my friend! : )) Have a nice one.
Rudy | Apr 19, 2007 | Reply
Been looking everywhere for this tutorial. You made it look easy!
Thanks!
sean | Apr 19, 2007 | Reply
Hey this was sooo helpful to me, but just one thing I wanna ask. I saved it as a GIF image to get the transparent background, but im losing alot of image quality, any way arond that?
Christine | Apr 21, 2007 | Reply
I’ve been looking for this EVERYWHERE! lol & it was really easy to follow! Thanks again :]
ayla | Apr 29, 2007 | Reply
Like others, I was looking for this all day. Thank you very much. Your tutorial is well written. But, I was wondering if this technique still applies for CS3. Is there a faster way of cropping photos into shapes in CS3?
Anonymous | Apr 30, 2007 | Reply
I love this tutorial, but I’ve got Adobe Photoshop Elements 2.0..
Is there a way to do this in 2.0?
Bulfus | May 11, 2007 | Reply
EXCELLANT tutorial. very easy to follow. does exactly what it says on the tin and so on!! Thanks again!!
jill | Aug 22, 2007 | Reply
Thank you thank you thank you!!! That’s saved me wasting more hours reading other tutorials that don’t work. Just wish you used Camtasia Studio to make some videos so I could follow it even quicker! Cheers!!!
jill | Aug 22, 2007 | Reply
Can anyone help - I have a perfectly formed rounded rectangle. I am trying to create a grey halo type effect round it (I am trying to match an image the web designer created for our website before he left)! Unfortunately, he deleted his photoshop files. Grr! I tried applying strokes and glows, but I cannot get a white gap between the image and the grey effect the way he did!
lauren | Aug 30, 2007 | Reply
i do all of the above but when i go to make selection, it is light gray and i can not choose it? any help?
AussieChad | Feb 8, 2008 | Reply
G’day Mate,
Just starting out with Photoshop, as you stated in the beginning this task seems hard for beginners, that’s only until we find someone willing to share their knowledge.
Thank you so very much, just when I thought I was beat, I found this site & your good self!
Good things to you friend!
Cheers
Garrett | Mar 6, 2008 | Reply
Can we take this a step further? How to I use that same shape and size and apply it to other images, so I have the same “buttons” sizes with different images?