Using Paths to create smooth, rounded corners in Photoshop

Posted by Matt Thommes on 10/11/2005

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

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

# Matt Thommes at 10/26/2005 7:10 am cst

A writeup for GIMP is certainly possible. Thanks for the idea.

# Andy Atkinson at 11/13/2005 5:39 pm cst

Done!

Creating Rounded Corners with GIMPShop

# 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

# 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?

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

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

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

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

# 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?

# 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?

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

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

# 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

# Tess at 4/2/2006 6:28 am cst

I managed to do the above.

Thankyou

# ibit at 4/12/2006 4:22 pm cst

Thanks! You made this so easy.

# Chris at 4/19/2006 5:31 am cst

You rock!

No longer will i fear rounded corners!

# 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

# 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

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

# Henry at 5/13/2006 11:50 pm cst

Andy thanks for the quick reply and help ;)

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

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

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

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

# 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

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

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

# Ryan at 7/3/2006 10:37 am cst

Oh I'm sorry. I didn't see that. Thanks.

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

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

# Anonymous at 7/5/2006 10:51 am cst

Worked like a charm! Thanks much!

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

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

# Anonymous at 8/8/2006 3:03 pm cst

THANK YOU SO MUCH!!! I LOVE THIS.

# 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

# 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

# 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

# erika at 10/2/2006 1:54 am cst

can't do it in cs2 :(

"make selection" is not in the list

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

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

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

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

# wiepie at 10/23/2006 9:21 am cst

Nice tutorial it was really helpfull

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

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

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

# 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?

# 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 said in a recent episode of PixelPerfect, it's not what the effect is called, its what the effect does that is important.

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

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

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

# Anonymous at 2/10/2007 5:33 am cst

Hail you, Hail Matt Thommes :)

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

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

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

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

# Indranil at 4/14/2007 9:18 pm cst

Matt, thank you for this extremely helpful tutorial.

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

# Rudy at 4/19/2007 2:21 pm cst

Been looking everywhere for this tutorial. You made it look easy!

Thanks!

# 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?

# 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 :]

# 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?

# 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?

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

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

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

# 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?

# 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

# 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?

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

Comment preview: