Adding rounded corners to photos and other visual elements with Photoshop

By Donovan Myers
Posted on Aug 5, 2007

Comments (2)

From time to time, I manage to impress our clients, as well as Jason, by using a simple technique in Adobe Photoshop to add rounded corners to a photo. I came up with my own method of rounding corners when I was first learning Photoshop over 8 years ago. Over the years I have simplified and improved my method.

For this example, I'm going to be adding 10 pixel radius rounded corners to this photo of my new puppy, Lucy.

Start with a photograph

To begin, I open up the image and double click the "background" layer in the layers pallet to make it a regular layer complete with transparency.

Pro tip: A Background layer is not like every other layer in Photoshop. This is denoted by the italic text. A Background layer cannot have transparency. If you were to make a selection and delete it, it would be filled with your background color rather than becoming transparent. By double clicking the Background layer and clicking OK you are turning the Background layer into a regular layer. You can now delete a selection and have it become transparent.

Next I make a new layer and create a square using the rectangle select tool that is twice the size of the radius. I decided to make the corners 20 pixels so my square should be 40 pixels. To help create a perfect square, hold down the shift key as you drag it out the size while watching the dimensions (h x w) in the info pallet.

Pro tip: Make sure that you have the new layer selected (generally named Layer 1) when you create and fill this new square. If you don't, you will notice that you are filling small groupings of like colored pixels in your photo.

Adding a square selection

I fill the square with white.

Pro tip: If your foreground color is white, you can press Shift + F5 to fill it (choose foreground or background in the dialog box), or just select the Paint Bucket Tool and click inside the square selection.

Fill square with white

Now, using the same technique as the square, I create a circle with a diameter of 20 pixels. Instead of filling the circle like I did with the square, I align it over the square and press the delete key to remove the circle from inside the square. Make sure you have the layer selected that the square is on.

Delete the circle from the square

The next to last step is fairly tricky, but easy once you've done it a few times. Make sure that you have the layer that the square is on selected, then drag out a rectangle that selects 1/4 of the square we've been working on. Cut the selection by using Command X or Control X and then paste it using Command P or Control P. Repeat this step for the remaining 1/4s of the square.

NOTE: Each time you paste, Photoshop will make a new layer for your pasting. You will need to make sure you select the layer with the circle deleted out of the square (probably named Layer 1) every time you cut a quarter from it.

The result should be 1/4 of the square on each layer.

Cut your square into quarters

Lastly I dragged all of the 1/4 squares into the proper corners.

Pro tip: Just choose a layer by clicking it in the layers pallet, make sure you have the Move Tool active and start dragging it across your photo. You will notice which corner is moving and you can then place it in the proper corner of the photo; it should just snap into proper the proper place.

Move your white corners to the corners of your photo

Now, if this were a few years ago, I would have flattened my image and saved it as a web graphic. But what if this image isn't going on a white background? Or what if I decided later on that I don't want rounded corners on this image? Too late, I flattened the image.

The 8 year difference

The finishing touch is to select the layer with the photo and add a new layer mask that reveals all.

Now, while leaving the photo layer selected, use Command click or Control click while holding Shift to select the 4 layers with the 1/4 squares.

Pro Tip: You will need to click on the Layer thumbnail while you hold Command (or Control) and Shift. This will select all of the pixels in that layer and holding down shift will add to the selection as you do it across all layers. I have posted a screencast of this technique.

Now, with the photo layer's mask selected, fill the corner selections with black. This will now block out the corners allowing the background to show through. Now you can use this image over any color, gradient, or other photos and best of all the layer mask is non-destructive to the original image so we can (or our client can) always change our mind later.

Pro Tip: To make sure you have the mask selected, you will need to click the Layer Mask thumbnail in the layers pallet. It will have a black border around each corner.

You will also need to hide or delete the 4 layers that we used for our 4 white rounded corners. The corners are now part of the mask on the photo (Layer 0).

You'll notice the corners are now transparent and you have created a mask for your photo which can be easily removed