Using Paths to create smooth, rounded corners in Photoshop

Posted by Matt Thommes on October 11, 2005 | Post type: Gain

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:

Sample photograph

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:

Screen shot of Photoshop 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.

Screen shot of Photoshop menu bar

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.

Screen shot of Photoshop menu bar

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.

Screen shot of photograph in Photoshop

To get rid of the fill color, go to the Layers palette, and drag the Fill slider down to 0%.

Screen shot of Layers palette in Photoshop

Now, go to the Paths palette, use the arrow in the upper right corner, and select Make Selection.

Screen shot of Paths palette in Photoshop

In the Make Selection dialog box, leave the settings as is: Feather Radius at 0 pixels, Anti-aliased checked, and New Selection highlighted.

Screen shot of dialog box in Photoshop

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.

Sample photograph in Photoshop

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.

About the author(s)

Matt Thommes is an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Comments

Note: Comments may be viewed by authors, but if you have a more specific question you'd like to ask them, please email matt.thommes@paininthetech.com.

# Anonymous at 10/18/2005 12:04 pm cst
How about a writeup for GIMP?

Quick Link to this comment: http://TTIP.me/c3850

# Melissa Della at 10/18/2005 12:05 pm cst
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.

Quick Link to this comment: http://TTIP.me/c3851

# Matt Thommes at 10/26/2005 7:10 am cst
A writeup for GIMP is certainly possible. Thanks for the idea.

Quick Link to this comment: http://TTIP.me/c3847

# Andy Atkinson at 11/13/2005 5:39 pm cst
Done! [Creating Rounded Corners with GIMPShop](http://paininthetech.com/creating_rounded_corners_with_gimpshop)

Quick Link to this comment: http://TTIP.me/c3867

# Julius Y at 11/20/2005 11:36 pm cst
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

Quick Link to this comment: http://TTIP.me/c3870

# Daisyhead at 1/19/2006 8:11 pm cst
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?

Quick Link to this comment: http://TTIP.me/c3930

# Matt Thommes at 1/20/2006 9:44 am cst
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.

Quick Link to this comment: http://TTIP.me/c3931

# Yash at 1/21/2006 9:25 am cst
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!!!

Quick Link to this comment: http://TTIP.me/c3928

# Mark at 2/24/2006 8:12 am cst
Wow, that was easy and yet I wouldn't have worked that one out in a million years. Thanks folks.

Quick Link to this comment: http://TTIP.me/c3974

# Tomislav Chagall at 3/14/2006 9:53 pm cst
matt, you are indeed a star: it is easy when you know how. much respect. :)

Quick Link to this comment: http://TTIP.me/c3956

# Vince at 3/19/2006 10:06 am cst
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?

Quick Link to this comment: http://TTIP.me/c3984

# brian at 3/26/2006 5:20 am cst
Quick question: How do I add a border with rounded edges to a picture that I want to keep perfectly squared?

Quick Link to this comment: http://TTIP.me/c3987

# Matt Thommes at 3/27/2006 6:34 am cst
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.

Quick Link to this comment: http://TTIP.me/c3973

# Stephanie at 3/27/2006 10:59 pm cst
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!

Quick Link to this comment: http://TTIP.me/c4004

# Tess at 4/2/2006 4:25 am cst
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

Quick Link to this comment: http://TTIP.me/c3938

# Tess at 4/2/2006 6:28 am cst
I managed to do the above. Thankyou

Quick Link to this comment: http://TTIP.me/c3939

# ibit at 4/12/2006 4:22 pm cst
Thanks! You made this so easy.

Quick Link to this comment: http://TTIP.me/c3949

# Chris at 4/19/2006 5:31 am cst
You rock! No longer will i fear rounded corners!

Quick Link to this comment: http://TTIP.me/c4001

# Neeraj Shukla at 4/23/2006 11:48 pm cst
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

Quick Link to this comment: http://TTIP.me/c3994

# Henry at 5/13/2006 3:25 am cst
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

Quick Link to this comment: http://TTIP.me/c4036

# Andy Atkinson at 5/13/2006 1:04 pm cst
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.

Quick Link to this comment: http://TTIP.me/c4035

# Henry at 5/13/2006 11:50 pm cst
Andy thanks for the quick reply and help ;)

Quick Link to this comment: http://TTIP.me/c4038

# Matt Thommes at 5/14/2006 7:57 am cst
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.

Quick Link to this comment: http://TTIP.me/c4039

# thos at 5/18/2006 4:24 am cst
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.

Quick Link to this comment: http://TTIP.me/c4047

# Greg at 5/21/2006 5:05 am cst
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.

Quick Link to this comment: http://TTIP.me/c4049

# Joan at 6/24/2006 1:26 pm cst
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.

Quick Link to this comment: http://TTIP.me/c4028

# Anonymous at 6/28/2006 1:18 pm cst
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

Quick Link to this comment: http://TTIP.me/c4015

# Ryan at 7/3/2006 12:11 am cst
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.

Quick Link to this comment: http://TTIP.me/c4034

# Matt Thommes at 7/3/2006 5:13 am cst
Ryan, see the thread above, starting with this comment. That should answer your question. Thanks!

Quick Link to this comment: http://TTIP.me/c4037

# Ryan at 7/3/2006 10:37 am cst
Oh I'm sorry. I didn't see that. Thanks.

Quick Link to this comment: http://TTIP.me/c4040

# Ryan at 7/3/2006 11:21 am cst
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.

Quick Link to this comment: http://TTIP.me/c4041

# Matt Thommes at 7/3/2006 1:31 pm cst
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.

Quick Link to this comment: http://TTIP.me/c4042

# Anonymous at 7/5/2006 10:51 am cst
Worked like a charm! Thanks much!

Quick Link to this comment: http://TTIP.me/c4044

# Yadav at 7/12/2006 6:52 am cst
I was searching all over the web to get a solution for this... finally.. only yours worked... thanks a lot.

Quick Link to this comment: http://TTIP.me/c4019

# Hannah G. at 7/31/2006 9:09 am cst
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!

Quick Link to this comment: http://TTIP.me/c4074

# Anonymous at 8/8/2006 3:03 pm cst
THANK YOU SO MUCH!!! I LOVE THIS.

Quick Link to this comment: http://TTIP.me/c4196

# Manish Nautiyal at 8/10/2006 4:41 am cst
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

Quick Link to this comment: http://TTIP.me/c4197

# James at 9/5/2006 2:06 am cst
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

Quick Link to this comment: http://TTIP.me/c4094

# jim at 9/5/2006 3:42 am cst
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

Quick Link to this comment: http://TTIP.me/c4095

# erika at 10/2/2006 1:54 am cst
can't do it in cs2 :( "make selection" is not in the list

Quick Link to this comment: http://TTIP.me/c4144

# Anonymous at 10/8/2006 9:02 am cst
"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!

Quick Link to this comment: http://TTIP.me/c4148

# Craige at 10/8/2006 9:38 pm cst
Hi, I followed your instructions exactly, but when I switch to the Paths palette, nothing is listed there. Any ideas why? Thanks!

Quick Link to this comment: http://TTIP.me/c4149

# Matt Thommes at 10/9/2006 1:58 pm cst
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.

Quick Link to this comment: http://TTIP.me/c4150

# Lil at 10/17/2006 2:08 pm cst
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...

Quick Link to this comment: http://TTIP.me/c4163

# wiepie at 10/23/2006 9:21 am cst
Nice tutorial it was really helpfull

Quick Link to this comment: http://TTIP.me/c4171

# Yolan at 10/29/2006 7:21 pm cst
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!

Quick Link to this comment: http://TTIP.me/c4186

# Webguy at 12/1/2006 5:46 am cst
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. 8) Choose Clear from the Edit menu. Thats it!

Quick Link to this comment: http://TTIP.me/c4248

# Matt Thommes at 12/3/2006 5:35 am cst
__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...

Quick Link to this comment: http://TTIP.me/c4250

# Anita at 12/12/2006 12:55 pm cst
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?

Quick Link to this comment: http://TTIP.me/c4261

# Andy Atkinson at 12/12/2006 1:50 pm cst
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](http://bertmonroy.com) said in a [recent episode](http://revision3.com/pixelperfect/blingbling) of [PixelPerfect](http://revision3.com/pixelperfect), it's not what the effect is called, its what the effect *does* that is important.

Quick Link to this comment: http://TTIP.me/c4262

# Eric at 1/23/2007 1:10 pm cst
I was googling for this technique and I wanted to say thanks for the clear instructions...much appreciated.

Quick Link to this comment: http://TTIP.me/c4345

# Anonymous at 1/26/2007 10:50 am cst
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. :)

Quick Link to this comment: http://TTIP.me/c4370

# Sam at 1/26/2007 10:03 pm cst
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.

Quick Link to this comment: http://TTIP.me/c4381

# Anonymous at 2/10/2007 5:33 am cst
Hail you, Hail Matt Thommes :)

Quick Link to this comment: http://TTIP.me/c4229

# Erik at 2/21/2007 2:38 am cst
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!

Quick Link to this comment: http://TTIP.me/c4423

# Matt Thommes at 2/22/2007 4:12 am cst
We are working on a Photoshop "action" that can automate parts of this process. Look for the article here, in the coming weeks. Thanks!

Quick Link to this comment: http://TTIP.me/c4426

# Ornis at 4/1/2007 1:22 am cst
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.

Quick Link to this comment: http://TTIP.me/c4460

# Anonymous at 4/3/2007 10:20 pm cst
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!

Quick Link to this comment: http://TTIP.me/c4468

# Indranil at 4/14/2007 9:18 pm cst
Matt, thank you for this extremely helpful tutorial.

Quick Link to this comment: http://TTIP.me/c4485

# Mr. Nelson at 4/15/2007 8:57 am cst
This was a fast and easy solution to my problem! Keep on rocking my friend! : )) Have a nice one.

Quick Link to this comment: http://TTIP.me/c4486

# Rudy at 4/19/2007 2:21 pm cst
Been looking everywhere for this tutorial. You made it look easy! Thanks!

Quick Link to this comment: http://TTIP.me/c4497

# sean at 4/19/2007 11:41 pm cst
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?

Quick Link to this comment: http://TTIP.me/c4498

# Christine at 4/21/2007 7:49 pm cst
I've been looking for this EVERYWHERE! lol & it was really easy to follow! Thanks again :]

Quick Link to this comment: http://TTIP.me/c4504

# ayla at 4/29/2007 12:47 pm cst
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?

Quick Link to this comment: http://TTIP.me/c4508

# Anonymous at 4/30/2007 3:13 pm cst
I love this tutorial, but I've got Adobe Photoshop Elements 2.0.. Is there a way to do this in 2.0?

Quick Link to this comment: http://TTIP.me/c4510

# Bulfus at 5/11/2007 8:52 am cst
EXCELLANT tutorial. very easy to follow. does exactly what it says on the tin and so on!! Thanks again!!

Quick Link to this comment: http://TTIP.me/c4525

# jill at 8/22/2007 7:45 am cst

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

Quick Link to this comment: http://TTIP.me/c4593

# jill at 8/22/2007 8:33 am cst

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!

Quick Link to this comment: http://TTIP.me/c4591

# lauren at 8/30/2007 4:38 pm cst

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?

Quick Link to this comment: http://TTIP.me/c4590

# AussieChad at 2/8/2008 8:28 am cst

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

Quick Link to this comment: http://TTIP.me/c4636

# Garrett at 3/6/2008 10:26 am cst

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?

Quick Link to this comment: http://TTIP.me/c4662

# Brett at 11/15/2008 9:23 pm cst

Awesome info, and well stated point that this should be somthing easy to do (given that you can do it automatically in the new Word!) It's amazing to find the tool differences between CS2 and Elements!

Quick Link to this comment: http://TTIP.me/c4783

# Ugur at 2/12/2009 5:21 pm cst

Nice tutorial. I usually use pencil tool to make rounded corners.

Quick Link to this comment: http://TTIP.me/c4917

# b2b at 2/16/2009 11:56 pm cst

Really a nice post. I learnt photoshop by myself. But this post helps me to create rounded corner box. I'm going to create a rounded corner favicon for my website. Thanks for this post...

Quick Link to this comment: http://TTIP.me/c4926

# Jason B at 6/3/2009 4:34 am cst

Fantastic! I could kiss your rounded box, thankyou for sharing this knowledge - I am now a much happier person and can stop worrying about pulling anymore hair out

Quick Link to this comment: http://TTIP.me/c5131

# Sal at 6/3/2009 5:09 pm cst

What if the image i have is set to the width and height that I need, and all I want is to round off the corners???

Quick Link to this comment: http://TTIP.me/c5134

# Swards at 6/18/2009 6:25 pm cst

Sal - Overlay the rounded rectangle - put the border right up to the edge of the image Select it (do this from the layers menu by holding down the command key and clicking on the layer). Then select inverse from the select menu. Choose the layer with the image Hide the layer with the rounded rectangle. Delete the 4 corners.

Quick Link to this comment: http://TTIP.me/c5177

# Carly at 8/6/2009 9:02 pm cst

Thank you so much for making this tutorial. I've been looking for the past hour and couldn't find a single one that worked!

Quick Link to this comment: http://TTIP.me/c5255

# Erika Kachama-Nkoy at 9/2/2009 10:05 am cst

Four years later and this post is still making our lives easier. Many thanks. I love the internet.

Quick Link to this comment: http://TTIP.me/c5288

# Dee at 9/15/2009 4:32 pm cst

THanks man. you explained very well.

Quick Link to this comment: http://TTIP.me/c5328

# christopher at 10/15/2009 2:18 am cst

While this method does work for creating rounded corners, as with all the other sites I have found, this assumes you are using a WHITE background.

If you use any other background the square edges show.

How about explaining how to REMOVE the square edges via a proper cut?

The only work around that I have been able to come up with to combat this is to colour the offending white edges the same as the background, but this is only a work around.

Surely a tool such as photoshop is not as limited as to have to use such a work around. If people want rounded edges then it should be able to be done properly so it works with any coloured background the designer chooses.

Quick Link to this comment: http://TTIP.me/c5363

# Ron at 10/28/2009 8:54 am cst

YES! THANK YOU VERY MUCH! I almost gave up on finding a way to figure this out but your careful step by step instruction was truly helpful.

Quick Link to this comment: http://TTIP.me/c5392

# Nicole at 1/2/2010 2:06 pm cst
when I turn to "Paths", nothing appears :/

Quick Link to this comment: http://TTIP.me/c5468

# Eric Campbell at 1/12/2010 4:02 am cst

Thank you!!! Complete life saver with this one. Thank you so much!!!!

Quick Link to this comment: http://TTIP.me/c5490