How to make rounded corners with The GIMP
“Tell me once more,” she said, “how to make rounded corners. You’ve shown me before, but I forgot.”
So here goes.
Input is a picture (photograph, drawing), output is the same image but with rounded corners against a transparent background. The transparent background makes it easy to position the image against any backdrop. If you don’t need that, just skip the bits where I talk about transparency.
Where I say “image menu” I refer to the menu that since around GIMP 2.0 was shown by default at the top of the image windows. Since GIMP 2.6, this menu has become GIMP’s sole menu. (Before 2.0 you had a toolbox menu, and between 2.0 and 2.4 you had both.)
Step 1. Start The GIMP.
Step 2. Load an image. (Illustration)
Step 3. Add transparency to the image. I currently use GIMP 2.4, and adding transparency to an image can be done using menu item Layer / Transparency / Add alpha channel of the image menu of that version.
If Add alpha channel is grayed out and cannot be selected, this probably means that your image already has an alpha channel. Alpha channel is a fancy word meaning that apart from being able to set the colour value of pixels, you can also set their level of transparency.
Step 4. Select all (image menu: Select / All). (Illustration)
Step 5. Use the function for rounded corners. In the image menu: Select / Rounded Rectangle.
Step 6. A new dialog window should pop up (see Figure 3). The bigger you set Radius, the bigger the corners. A radius between 10 and 20 % seems to produce the sort of subtle corners you tend to see in web page designs. (Illustration)
Step 6b. Click OK. (Illustration)
Step 7. Invert the selection. In the image menu, select Select / Invert (apparently this is Select / Inverse in newer versions, but you get the point). (Illustration)
Step 8. Cut the selection. In the image menu: Edit / Cut. You may wish to learn the shortcut, CTRL+X (or Command+X on the Mac) by heart. (Illustration)
Step 9. Check to see the corners are indeed transparent. GIMP will show a grey-grey checkerboard pattern in the corners. If the corners are made of the background colour instead (default: white), you may have forgotten to add transparency to the image. In that case undo till step 3, and try again.
Step 10. Save the result as PNG. You’re done.
Figure 1, the result of step 2.
Figure 2, the result of step 4. The only visible difference between this and the previous illustration is that the “marching ants,” the dashed line around the image, have changed from yellow to white. More noticeable, but not visible here, is that in the second image, the marching ants actually move.
Figure 3, the Rounded Rectangle pop-up. This function turns a rectangular selection into a selection with rounded corners. Since selections in the GIMP are actually masks, selections can be as fuzzy as the colour depth of the masks allows.
Figure 4, the result of step 6 is a rectangular selection with rounded corners.
Figure 5, zoomed into the topleft corner, the selection has been inverted in step 7, and now consists of just the four corners.
Figure 6, in step 8 you cut corners. No, really!
Figure 7, same as the previous illustration but zoomed in.
Figure 8, the end result. In browsers made by professionals, such as Microsoft or Apple, this may not look exactly as planned. Get a newer browser or download Firefox. What with the time you spend on the internet you really shouldn’t use the tool that came for free with your operating system.
Update 2010-08-08: if you are creating images for the web, and want IE 6 to play too, try www.twinhelix.com/css/iepngfix/.
The photo used for these illustrations came from the US National Oceanic and Atmospheric Administration and is therefore in the Public Domain.
Update 2011-11-01: Here is another tip for those working exclusively on web graphics that is going to save you a heap of time. There is a new version of CSS (the style language that all web browsers understand) in the making called CSS 3. It is pretty much finished from what I understand, and its basic enhancements are supported by most modern browsers, including Internet Explorer 9. One new feature is the border-radius property, which will let you do the above to all your images at once simply by inserting “img { border-radius: 10px; }” in your stylesheet.
The snag is of course that browsers that do not support this new property will still show square images. Also, not every browser supports the new properties in the same way, so do read up on CSS3 before using it.
April 5th, 2009 at 4:05 pm
Thankyou! I have spent so long trying to figure this out in Gimp!
May 1st, 2009 at 12:11 pm
Very nice!
Thanks!
June 7th, 2009 at 1:52 am
Thank you so much! Your instructions were so easy to follow and I was able to make the corners of my banner rounded!
July 19th, 2009 at 9:07 pm
Your tut is perfect! But for some reason I can’t find “Select / Inverse.”
July 23rd, 2009 at 10:34 am
Cali, you could try CTRL+i instead, which is the default keyboard shortcut for that function. Are you using an English version of the GIMP? Oh, I see the menu is called Select / Invert in the version I am using.
July 25th, 2009 at 4:43 pm
Ok, thanks. I found it after a while. Thanks for your help. C:
July 29th, 2009 at 9:08 am
Thank you so much.. been trying to work this out for aggess lol.
September 15th, 2009 at 6:29 pm
THE BEST tutorial thankyou! everyone else made things so unclear!
October 22nd, 2009 at 11:15 am
On the menu bar go to filters–>decor–>rounded corners
Give it a bash its super easy!
January 23rd, 2010 at 8:09 pm
Thanks! Usefull information
January 24th, 2010 at 11:00 pm
When I save the image its still a square.It fills in what I delete with white.
January 29th, 2010 at 11:54 pm
Money, this is likely to be one of two things. You are either saving in a format that does not support transparency, such as JPEG, or you forgot to add transparency to the image. Make sure you follow the instructions in step 3, and save as PNG after you are done.
March 16th, 2010 at 7:18 pm
Thank you very much for the help. Ive been trying to do this to no avail
May 13th, 2010 at 12:44 am
This helped me. Thanks!
May 30th, 2010 at 12:46 pm
There are many tutorials on rounded corners but I just could not get the transparency done properly. This tutorial really helped me. Thanks.
June 10th, 2010 at 2:26 am
Great tutorial – thanks!
June 16th, 2010 at 10:21 am
that’s good
June 29th, 2010 at 6:34 pm
I’m trying to make a rounded banner for blogger and have followed all your instructions, but am still getting white corners, it’s driving me nuts!
June 29th, 2010 at 8:42 pm
Have you also read the comments?
July 29th, 2010 at 4:43 pm
Same issue with white showing after corners are rounded. I double checked to make sure transparency was used and also made sure file was saved as a .png file.
Thoughts??
July 29th, 2010 at 4:46 pm
Just realized that file displays properly when I use Firefox, but not in IE. Is there a fix for IE?
August 7th, 2010 at 1:09 am
I believe IE 7 and onwards can display the transparency just fine. There is a fix for IE 6: http://www.twinhelix.com/css/iepngfix/ . Don’t know about IE 5.5 and older.
August 8th, 2010 at 10:30 pm
Thanks works great!
Instead of using transparency I just copied and pasted the selected rounded corner image onto a rectangle of the same size with the background color of the page I was putting it on.
;)
August 11th, 2010 at 10:12 am
Matt, that works just as well, and is how the entire world did it before hacks like IE PNG Fix came along. :-)
September 12th, 2010 at 6:58 am
Thank you :)
October 6th, 2010 at 8:04 am
Thanks very much!! This helped a lot. GIMP can be confusing for beginners :)
November 12th, 2010 at 3:20 pm
Exactly what I was looking for – thanks! Is it okay if I make a danish translation of this guide and post it on my blog? I’ll give you credit for it, of course! :-)
November 29th, 2010 at 11:33 pm
Sure, Morten, go ahead.
December 14th, 2010 at 1:16 am
Thanks, mate!
Also for giving me a good laugh:
“”"
In browsers made by professionals, such as Microsoft or Apple, this may not look exactly as planned. Get a newer browser or download Firefox. What with the time you spend on the internet you really shouldn’t use the tool that came for free with your operating system.
“”"
Too right!
Use Chrome :-)
December 23rd, 2010 at 10:49 pm
[...] blev at lave de runde hjørner i det gratis billedbehandlingsprogram GIMP. (Tak til Branko’s Weblog) Her følger en opskrift på hvorledes man kan [...]
February 25th, 2011 at 8:19 pm
Thanks, worked perfectly.
April 11th, 2011 at 12:36 pm
Excellent! That’s exactly what I needed. Thank you!
April 25th, 2011 at 5:02 am
Super….easy to understand even for a newbie… thank you! :)
August 31st, 2011 at 12:07 pm
Thanks a lot…I got exactly what I needed :)
September 21st, 2011 at 4:34 pm
Thanks for your tut! Worked perfect w. Gimp 2.6.11!
October 31st, 2011 at 2:40 pm
Great tut, I’ve made similar :))
November 1st, 2011 at 12:11 pm
Nice tutorials, mr./ms. Gimp Tutorials, I see you got inspired. :-)
November 4th, 2011 at 7:39 am
Thanks!! You save my life :)
January 5th, 2012 at 3:37 am
This was hugely helpful. Thank you!
January 11th, 2012 at 6:10 pm
I got this to work except when I upload these pics into a slideshow in Wordpress, the bottoms are still square. If I simply view the pics on my pc, I see 4 rounded corners. Does rounding the corners make the image a bit larger? My slideshow is only so big. Thanks for the great instructions!
January 11th, 2012 at 11:52 pm
The image should stay the same size. Which browsers are you using to test?