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.

howto-roundedcorners-01.png
Figure 1, the result of step 2.

howto-roundedcorners-02.png
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.

howto-roundedcorners-03.png
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.

howto-roundedcorners-04.png
Figure 4, the result of step 6 is a rectangular selection with rounded corners.

howto-roundedcorners-05.png
Figure 5, zoomed into the topleft corner, the selection has been inverted in step 7, and now consists of just the four corners.

howto-roundedcorners-06.png
Figure 6, in step 8 you cut corners. No, really!

howto-roundedcorners-07.png
Figure 7, same as the previous illustration but zoomed in.

howto-roundedcorners-result.png
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.

58 Responses to “How to make rounded corners with The GIMP”

  1. alan macmillan orr Says:

    Thankyou! I have spent so long trying to figure this out in Gimp!

  2. Jorge Says:

    Very nice!
    Thanks!

  3. SimplyRaydeen Says:

    Thank you so much! Your instructions were so easy to follow and I was able to make the corners of my banner rounded!

  4. Cali Says:

    Your tut is perfect! But for some reason I can’t find “Select / Inverse.”

  5. brankl Says:

    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.

  6. Cali Says:

    Ok, thanks. I found it after a while. Thanks for your help. C:

  7. Jeffrey Says:

    Thank you so much.. been trying to work this out for aggess lol.

  8. Anonymous Says:

    THE BEST tutorial thankyou! everyone else made things so unclear!

  9. steven Says:

    On the menu bar go to filters–>decor–>rounded corners

    Give it a bash its super easy!

  10. Jonas Says:

    Thanks! Usefull information

  11. money Says:

    When I save the image its still a square.It fills in what I delete with white.

  12. brankl Says:

    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.

  13. collins Says:

    Thank you very much for the help. Ive been trying to do this to no avail

  14. Kiefer Says:

    This helped me. Thanks!

  15. russell Says:

    There are many tutorials on rounded corners but I just could not get the transparency done properly. This tutorial really helped me. Thanks.

  16. mark Says:

    Great tutorial – thanks!

  17. wild Says:

    that’s good

  18. fibrespace Says:

    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!

  19. brankl Says:

    Have you also read the comments?

  20. Grod Says:

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

  21. Grod Says:

    Just realized that file displays properly when I use Firefox, but not in IE. Is there a fix for IE?

  22. brankl Says:

    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.

  23. Matt Says:

    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.

    ;)

  24. brankl Says:

    Matt, that works just as well, and is how the entire world did it before hacks like IE PNG Fix came along. :-)

  25. Ramzi Says:

    Thank you :)

  26. Kamal Says:

    Thanks very much!! This helped a lot. GIMP can be confusing for beginners :)

  27. Morten Says:

    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! :-)

  28. brankl Says:

    Sure, Morten, go ahead.

  29. Marco Massenzio Says:

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

  30. Runde hjørner med GIMP Says:

    [...] 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 [...]

  31. Kyle Says:

    Thanks, worked perfectly.

  32. Michal Says:

    Excellent! That’s exactly what I needed. Thank you!

  33. klara Says:

    Super….easy to understand even for a newbie… thank you! :)

  34. Sanjeev Says:

    Thanks a lot…I got exactly what I needed :)

  35. Andrei Says:

    Thanks for your tut! Worked perfect w. Gimp 2.6.11!

  36. Gimp tutorials Says:

    Great tut, I’ve made similar :))

  37. brankl Says:

    Nice tutorials, mr./ms. Gimp Tutorials, I see you got inspired. :-)

  38. Rudra Says:

    Thanks!! You save my life :)

  39. amanda Says:

    This was hugely helpful. Thank you!

  40. tina Says:

    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!

  41. brankl Says:

    The image should stay the same size. Which browsers are you using to test?

  42. Anonymous Says:

    Great tip well explained

    Thanks

  43. TeoÅ› Says:

    thx. Just thx.

  44. Caroline Says:

    Thanks so much – spent ages trying to work this out and your instructions were so clear and easy to understand!

  45. Derick Says:

    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.

  46. brankl Says:

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

  47. chris Says:

    Thanks, Mate.
    No matter how many times I read this I forget the next time.iT WORKS A TREAT !

    DRRRR.

  48. MagiKesh Says:

    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…

  49. Vijay Kmar Says:

    Thank u very much bro. Your tutorial is way good and yes it worked for me.once again thanks a lot :)

  50. Meesha Says:

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

  51. brankl Says:

    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.

  52. The Weary Chef Says:

    Holy cow, was this helpful! Thank you so much for such perfectly detailed instructions!

  53. pikesan Says:

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

  54. Vivian Says:

    Wow! Thank you so much, this blog helped alot!

  55. Shiva Says:

    thank u but, is there any online s/w like gimp

  56. brankl Says:

    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.

  57. Perry Says:

    Four year old post and still super helpful. Thanks.

  58. brankl Says:

    I’m as surprised as you are, but I’m also happy I can be of help. Thanks for the feedback!

Leave a Reply