strange border aroung text of img - html

Question

I have different images on my website, and some of them (PNG images) have a strange grey border around the text part of image, like this:
https://imgur.com/a/yDtM4
The text is inside the image, not separated.
The css/html code of the image is:
#bor_panel {
border-radius: 12px;
border: 2px solid #287396;
padding: 20px;
width: 170px;
height: 170px;
display: flex;
}
<div id="bor_panel">
<img src="images/raro_page/Ampia_Connettivita_B.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>
Any idea? It seems a normal img tag...
------EDIT------
This is the original image:
https://imgur.com/a/P9LVm
It seems ok

Answer 1

There is an issue in your image. I opened your original image in the photoshop and found this after zooming the image. There is an gray space in your image around the text.
I have edited your image in photoshop and make a snippet below. Now there is no border.
#bor_panel {
border-radius: 12px;
border: 2px solid #287396;
padding: 20px;
width: 170px;
height: 170px;
display: flex;
}
img{
width:126px;
height: 126px;
margin: auto;
}
<div id="bor_panel">
<img src="https://i.stack.imgur.com/NdgFO.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>

Answer 2

It is strange. It is a part of the image you are using. Try using some image editing application to remove that border. It doesn't seem like its due to CSS or HTML