Random Border in Div Box With Background Color and Image Element

[gerymu09 (Marcos Molina)]

Hello,

I am quite new to webflow and web design, so please bear with me. I want to create an "odd shape: border inside a card design as shown in the screenshot below (highlighted in red):

I did this by creating a dive box to host the image element with the predesigned border file. The div box has the background color set to blue so it blends with the background color of the right side of the card.

However, now I have a weird border around the image which prevents it from looking flush with the white background on the left. See screenshot below highlighted in red:

How can I get rid of this?

P.S. I know there are coded ways with CSS to make the border native to the code but I wouldn’t even know how to code, let alone, implement it.

---

Here is my site Read-Only: [LINK][1]

[Port_of_Folio]

When I open your png in Photoshop, I see a transparent edge

[gerymu09 (Marcos Molina)]

Wow, what a find!! This was indeed the problem. I have been building all the designs on Figma and found out that if the borders of the frame you are exporting as a PNG are located at half-pixel, they will export with a transparent border. If exporting as jpg, it will export with a white background.

If anyone is interested, you can read more about it in this Figma forum discussion: Borders around image exports - #3 by Gleb - Ask the community - Figma Community Forum

Thank you so much Port_of_Folio for your help here.