How to remove the border of an image?

Question

I have founded many question like mine on StackOverflow example1 example2 but for a unknown reason I still have some borders displayed around my image:

 .imgCadenas{
  width:  50px;
  height: 50px;
  background: url('/cadenas.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100%;

  border:0;
  border-style: none;

  position: absolute;
  right: 150px;
  top: 5px;
}

Someone has a solution ?

[EDIT] with your advices I have this CSS in the browser:

.liMachine {
    list-style-type: none;
    border-style: solid;
    margin-bottom: 5px;
    word-break: break-all;
    position: relative;

}

.imgCadenas{
  width:  50px;
  height: 50px;
  background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100%;

  border: 0 !important;
  border-style: none !important;
  outline: none !important;
  display: block;

  position: absolute;
  right: 250px;
  top: 5px;
}

.whoLock{
  position: absolute;
  right: 15px;
  top: 10px;
}

<li class="liMachine switch">
        <div id="nameMachine">
            <h3>My machine</h3>
        </div>
        <div id="stateMachine">
            State:<span class="state">running</span>
        </div>
        <div>
            <img class="imgCadenas">
            <p class="whoLock">Locked by: StackOverflow</p>
        </div>
    </li>

If the border isn't coming from the background image itself then Pugazh methods should apply, if not - then it's very possible that whatever rule you are trying to declare to negate this border style is being overwritten or overqualified by another rule - which should be easy enough to identify in your browser IDE/development tool pop-up. — UncaughtTypeError, Mar 29 '17 at 09:45
outline: none; border: 0 none;. Please check and see if there is a border in image. — Mukeysh, Mar 29 '17 at 09:46
`border: 0`, `outline: none`, `box-shadow: none`, `background-color: transparent`, or even the image has the border itself, ... there are too many options :( — Diego N., Mar 29 '17 at 09:46
Richard: it didn't change anything. Pugazh it didn't change anyhting. ThisBeliever no it didn't. UncaughtTypeError in the console I can see my parameters and they aren't overwrittent. Mukeysh nothing has changed, Diego arrrrg — Jerome, Mar 29 '17 at 10:09
Yea... like Diego and others, I'm wondering if the border is part of the image, can you confirm it's not Jerome? — SLWS, Mar 29 '17 at 10:10
Did you have the website url? or can you paste the code to jsfiddle? — jkythc, Mar 29 '17 at 10:17
@SLWS I added a Snippet. Jkythc I made a fiddle because for the moment in in Localhost — Jerome, Mar 29 '17 at 10:18
Your img element missing src attribute, this is the Chrome browser issues. You need to add back the src attribute. — jkythc, Mar 29 '17 at 10:23
@jkythc but I want to set it with the CSS, it's not possible ? — Jerome, Mar 29 '17 at 10:24
@jkythc it works ! can you put an answer ? And I'll upvote the others because it's right, just not with Chrome — Jerome, Mar 29 '17 at 10:28

score 1 · Answer 1 · edited Mar 29 '17 at 09:59

1

This can change on different browsers. You can try border-style:none !important;

So for all img:

img{border-style:none !important;}

or just for your img

<img class="imgCadenas" src"">

.imgCadenas{border-style:none !important;}

If you send your link for control. I can look for you.

edited Mar 29 '17 at 09:59

Martin Evans

45,791
17
81
97

answered Mar 29 '17 at 09:46

Mesut erdoğan

52
3

nothing has changed it's pretty frustrating because it should change – Jerome Mar 29 '17 at 10:06

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

Try to modify like this:

.imgCadenas{
  width:  50px;
  height: 50px;
  background: url('/cadenas.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100%;

  border: 0 !important;
  border-style: none !important;
  outline: none !important;

  position: absolute;
  right: 150px;
  top: 5px;
}

EDITED

Your img element missing src attribute, Try to change img element to div element.

See also: https://stackoverflow.com/a/22097004/4964262

edited May 23 '17 at 10:30

Community

1
1

answered Mar 29 '17 at 09:47

jkythc

420
3
12

nothing has changed and it's really frustrating because it should change – Jerome Mar 29 '17 at 10:07
Thank you for the help ! Now everything is working fine – Jerome Mar 29 '17 at 10:32

score 1 · Answer 3 · answered Mar 29 '17 at 09:48

1

Does adding !important to your CSS remove the border?

answered Mar 29 '17 at 09:48

SLWS

506
4
8

Upvesh Kumar · Answer 4 · 2017-03-29T11:05:48.137

1

Try using.

img {
    border:none;
    outline:none
}

edited Mar 29 '17 at 11:05

answered Mar 29 '17 at 09:50

Upvesh Kumar

11
3

How to remove the border of an image?

4 Answers4