strange border aroung text of img

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://i.sstatic.net/dJAJi.jpg

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://i.sstatic.net/qSdrF.jpg

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.sstatic.net/NdgFO.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>