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.
You should not have to check the boxes in the Export interface (good catch!) to get transparent backgrounds.
When you say that your image still shows a white background, is that in The GIMP, or only after you have saved it?
Update: Just now I too followed the tutorial word for word in GIMP 2.8.2. under Windows 7 and I get it to work without fail.
Holy cow, was this helpful! Thank you so much for such perfectly detailed instructions!
Thank you! Amazing how much time a search can save you. I appreciate you taking the time to make this! There’s now a “Select” menu item (not under Image) but otherwise, it works great!!
Wow! Thank you so much, this blog helped alot!
thank u but, is there any online s/w like gimp
If you Google for ‘online photo editor’ you will find plenty of tools, although I am not familiar with any of them, nor am I familiar with your needs, so I couldn’t say if any of the online software is GIMP-like enough for you.
You could visit the GIMP’s IRC channel where there are people who might be able to help you.
Four year old post and still super helpful. Thanks.
I’m as surprised as you are, but I’m also happy I can be of help. Thanks for the feedback!
Thanks!
Super – thanks so much!
Many thanks for your detailed instructions! So helpful to a GIMP newbie like me : )
really nice guide! thank you.
Very nice! Thank you for your instructions.
thanks.
Thank you for this article. Just made some road signs for Second Life, and they are now so much better!