How to remove the image border?

Question

I have this image:

1)

2)

which is being used with icon for a <input>:

' <input type="button" class=" button_add" />'

With CSS I added it to a li:

input.button_add {
    float: right;
    height: 40px;
    padding-left: 36px;
    background: url("../img/Arrow_Circle_Right-32.png") no-repeat;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

In point 2) you can check that the image has no borders, but in the final result the image appears to me like this:

It is possible to make these edges disappear?

Thank you for your attention

Answer 1

You must use:

border: none;
background: url("../img/Arrow_Circle_Right-32.png") transparent no-repeat;

Background Transfer is to prevent older sites from implementing color in bg.... A cool tip, is to click with the right button on the browser, on top of the object, go on inspect element and beside, or below will be displayed all css of it, almost every modern browser allows you to manipulate the css of the displayed input, hence you can 'play' with the code, add parameter, remove, until it meets your need.