# Crop picture with round corners

**URL:** <https://forum.xojo.com/t/crop-picture-with-round-corners/45296>\
**Category:** General\
**Created:** [September 13, 2018, 9:54am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296 "2018-09-13T09:54:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Horst\_Jehle](https://forum.xojo.com/user_avatar/forum.xojo.com/horst_jehle/32/5432_2.png) [@Horst\_Jehle](https://forum.xojo.com/u/Horst_Jehle)\
**Post date:** [September 13, 2018, 9:54am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/1 "2018-09-13T09:54:48Z")

</div>

How can I crop a picture, so it has round corners?

Left picture is the original, right picture is the crop picture:

![](http://a66.tinypic.com/m8mhs6.jpg)

---

<div class="post-metadata">

**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\
**Post date:** [September 13, 2018, 9:56am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/2 "2018-09-13T09:56:23Z")

</div>

You add a mask with round corner. I’ll check if I can find some code.

---

<div class="post-metadata">

**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\
**Post date:** [September 13, 2018, 9:57am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/3 "2018-09-13T09:57:45Z")

</div>

This is from before HiDPI I think:

`'Bubble mask, Fill the mask white
bubble.Mask.Graphics.ForeColor = rgb(255, 255, 255)
bubble.Mask.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
'Now draw the black rounded rectangle (that will allow the gradient to show through behind)
bubble.Mask.Graphics.ForeColor = rgb(0, 0, 0)
bubble.Mask.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 10, 10)
`

---

<div class="post-metadata">

**Author:** ![Horst\_Jehle](https://forum.xojo.com/user_avatar/forum.xojo.com/horst_jehle/32/5432_2.png) [@Horst\_Jehle](https://forum.xojo.com/u/Horst_Jehle)\
**Post date:** [September 13, 2018, 10:15am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/4 "2018-09-13T10:15:56Z")

</div>

How can I do this in a canvas when the logo picture (redhat.png) is a png file?

If I use this in the paint event, I go a black rounded rectangle.

dim bubble as new Picture(128,128)  
bubble.Graphics.ForeColor = rgb(255, 255, 255)  
bubble.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)  
'Now draw the black rounded rectangle (that will allow the gradient to show through behind)  
bubble.Graphics.ForeColor = rgb(0, 0, 0)  
bubble.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 20, 20)  
g.DrawPicture(bubble,0,0)

---

<div class="post-metadata">

**Author:** ![Sascha\_S](https://forum.xojo.com/user_avatar/forum.xojo.com/sascha_s/32/22328_2.png) [@Sascha\_S](https://forum.xojo.com/u/Sascha_S)\
**Post date:** [September 13, 2018, 10:28am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/5 "2018-09-13T10:28:34Z")

</div>

I can’t test right now but i think you need to load the RedHat.png in to a Picture Object and create the Mask Picture as described above, then apply the Mask to the RedHat Picture.

---

<div class="post-metadata">

**Author:** ![Horst\_Jehle](https://forum.xojo.com/user_avatar/forum.xojo.com/horst_jehle/32/5432_2.png) [@Horst\_Jehle](https://forum.xojo.com/u/Horst_Jehle)\
**Post date:** [September 13, 2018, 10:43am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/6 "2018-09-13T10:43:15Z")

</div>

Thank you for this hint. That’s the solution:

'Bubble mask, Fill the mask white  
dim bubble as new Picture(128,128)  
bubble.Graphics.ForeColor = rgb(255, 255, 255)  
bubble.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)  
'Now draw the black rounded rectangle (that will allow the gradient to show through behind)  
bubble.Graphics.ForeColor = rgb(0, 0, 0)  
bubble.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 20, 20)  
dim p as new picture(128,128,24)  
p.Graphics.DrawPicture(redhat128,0,0)  
p.ApplyMask(bubble)  
g.DrawPicture(p,0,0)

---

<div class="post-metadata">

**Author:** ![ronaldo\_florendo](https://forum.xojo.com/user_avatar/forum.xojo.com/ronaldo_florendo/32/159_2.png) [@ronaldo\_florendo](https://forum.xojo.com/u/ronaldo_florendo)\
**Post date:** [September 14, 2018, 5:20am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/7 "2018-09-14T05:20:01Z")

</div>

is this applicable only for desktop? or I can be use for Web too?

---

<div class="post-metadata">

**Author:** ![Vigia\_Lin](https://forum.xojo.com/letter_avatar_proxy/v4/letter/v/9fc348/32.png) [@Vigia\_Lin](https://forum.xojo.com/u/Vigia_Lin)\
**Post date:** [September 14, 2018, 6:12am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/8 "2018-09-14T06:12:15Z")

</div>

png image file.

---

<div class="post-metadata">

**Author:** ![Horst\_Jehle](https://forum.xojo.com/user_avatar/forum.xojo.com/horst_jehle/32/5432_2.png) [@Horst\_Jehle](https://forum.xojo.com/u/Horst_Jehle)\
**Post date:** [September 14, 2018, 6:34am UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/9 "2018-09-14T06:34:25Z")

</div>

You can use this code on any platform except iOS.

---

<div class="post-metadata">

**Author:** ![system](https://forum.xojo.com/uploads/default/original/1X/455b4dcc0e61630e9f81940004ddffa49c432a46.png) [@system](https://forum.xojo.com/u/system)\
**Post date:** [October 29, 2020, 7:22pm UTC](https://forum.xojo.com/t/crop-picture-with-round-corners/45296/10 "2020-10-29T19:22:08Z")

</div>