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 (Export in GIMP 2.8). 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.
Update 2014-08-21: Another tip for webmasters. According to the inimitable Caniuse.com transparent PNGs are now supported by all recent versions of all browsers, including Internet Explorer 8 and upwards. Good news everybody! The CSS property border-radius is now supported by the latest version of every major browser except Opera Mini.
Thankyou! I have spent so long trying to figure this out in Gimp!
Very nice!
Thanks!
Thank you so much! Your instructions were so easy to follow and I was able to make the corners of my banner rounded!
Your tut is perfect! But for some reason I can’t find “Select / Inverse.”
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.
Ok, thanks. I found it after a while. Thanks for your help. C:
Thank you so much.. been trying to work this out for aggess lol.
THE BEST tutorial thankyou! everyone else made things so unclear!
On the menu bar go to filters–>decor–>rounded corners
Give it a bash its super easy!
Thanks! Usefull information
When I save the image its still a square.It fills in what I delete with white.
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.
Thank you very much for the help. Ive been trying to do this to no avail
This helped me. Thanks!
There are many tutorials on rounded corners but I just could not get the transparency done properly. This tutorial really helped me. Thanks.
Great tutorial – thanks!
that’s good
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!
Have you also read the comments?
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??
Just realized that file displays properly when I use Firefox, but not in IE. Is there a fix for IE?
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.
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.
;)
Matt, that works just as well, and is how the entire world did it before hacks like IE PNG Fix came along. :-)
Thank you :)
Thanks very much!! This helped a lot. GIMP can be confusing for beginners :)
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! :-)
Sure, Morten, go ahead.
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 :-)
[…] 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 […]
Thanks, worked perfectly.
Excellent! That’s exactly what I needed. Thank you!
Super….easy to understand even for a newbie… thank you! :)
Thanks a lot…I got exactly what I needed :)
Thanks for your tut! Worked perfect w. Gimp 2.6.11!
Great tut, I’ve made similar :))
Nice tutorials, mr./ms. Gimp Tutorials, I see you got inspired. :-)
Thanks!! You save my life :)
This was hugely helpful. Thank you!
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!
The image should stay the same size. Which browsers are you using to test?
Great tip well explained
Thanks
thx. Just thx.
Thanks so much – spent ages trying to work this out and your instructions were so clear and easy to understand!
It’s a pain to make rounded corners.I cant make rounded corners on a project with multiple layers.It keeps selecting the background layer even though I have selected another layor.
You appeared to be using a spammy link in your comment. I have removed it. Don’t use it again or I’ll permablock you.
As for your problem, I really don’t know the answer. Selections should work on the current layer.
I suspect there may be a property of your layer that prohibits the operation you are attempting. The only thing I can think of is that it lacks an alpha channel. It should not default to the background layer though. I suggest you ask your question at the official GIMP IRC channel (see gimp.org).
Thanks, Mate.
No matter how many times I read this I forget the next time.iT WORKS A TREAT !
DRRRR.
nice job… anouther fast and dirty way is to make your box smaller than you want on an transparent layer. Then run a Gaussian blur, select by color the transparent background, invert the selection and repaint the highlighted box area…
Thank u very much bro. Your tutorial is way good and yes it worked for me.once again thanks a lot :)
Hi! I have followed your tut word for word, but my image still shows a white background where I removed the corners. I am using gimp 2.8 and I have to “export” my images, if I try to save as then I get an .xcf file format. When I export a little box pops up with options to check – do I need to change any of these in order for the transparency to show? The options are: interlacing (adam7), save background color, save gamma, save layer offset, save resolution, save creation time, save color values from transparent pixels.
Appreciate the help!!!