How can I remove the borders around my GIF logo?

[AvyCoffee]

I created an animated GIF for my logo. I'm using the Dawn theme, and it allows me to put it as my logo, but it still has the square border around it. I've entered code (which I thought would do the trick), but it didn't work. The code I entered is: 

.site-header__logo {
border: none !important; /* Removes border */
background: transparent !important; /* Ensures background is transparent */
}

.site-header__logo img {
display: block; /* Prevents any inline spacing */
margin: 0; /* Removes any margin */
padding: 0; /* Removes any padding */
outline: none; /* Removes any outline */

When I try to export the GIF with a transparent background, it gives me issues with the background animation. 

Is there a way to get around this to remove the border?

For reference, my site is: https://www.avycoffee.com

Thank you all in advance!

[BSSCommerce-HDL]

Hi @AvyCoffee, Your photo currently has built-in borders. This cannot be fixed.

[ES1]

Hi,

It seems that your image is a square gif. We actually do not see any border apart from the square sharped image you have added. You can have a rectangle logo covering more of the top header from left to right. All good logos are generally transparent and rectangle but in your case.

You can also have the background color of the gif same as the top header and then use the animation.

That ways, the background of the gif will be same as your header and will merge seamlessly.

Regards

[rezwan_cs]

The gif logo is not transparent at all. It a square shaped image that provide of sense of border here.

Please have a look at it if we put red background in the header, it looks like this - 

Let me know if you need any help further.