How remove border around image in css?

Question

I try to display a span when the cursor of the mouse is on a help icon.

It works, but nevertheless, I don't manage to remove the border around the icon.

My CSS :

.info{
    position:absolute;
    border:none;
}

a.info{
    position:absolute; 
    z-index:24; 
    background:none;
    color:#000;
    text-decoration:none
}

a.info:hover{
    z-index:25; 
    background-color:#FFF;
    cursor:help;
}

a.info span{
    display: none
}

a.info:hover span{ 
    display:block; 
    position:absolute;
    cursor:help;
    bottom:0px; 
    left:26px; 
    width:150px;
    padding:4px;
}

cd

If you want to remove the border around the image, why don't you just remove the border around the image? `.info img {}` — Boldewyn, Jan 28 '10 at 09:26
possible duplicate of [ inside gets blue border](http://stackoverflow.com/questions/2922858/img-inside-a-gets-blue-border) — Dave Jarvis, Dec 29 '13 at 23:33

score 68 · Answer 1 · answered Aug 18 '14 at 12:23

68

Another thing - remember that if you have an with an empty src attribute, then none of these suggestions will work, a border will still get shown.

<img src="" style="width:30px;height:30px;">

answered Aug 18 '14 at 12:23

Mike Gledhill

27,846
7
149
159

4

also src="" will cause a good browser to make a second request to your page as it is short hand for request the current url with an accepts header for images. – Jeff Aug 20 '14 at 21:17
For me this works well – Sajid Mehmood Aug 07 '21 at 20:10

score 51 · Accepted Answer · edited Feb 08 '14 at 05:44

51

Try this:

img{border:0;}

You can also limitate the scope and only remove border on some images by doing so:

.myClass img{border:0;}

More information about the border css property can by found here.

Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.

edited Feb 08 '14 at 05:44

jedmao

10,224
11
59
65

answered Jan 28 '10 at 09:26

marcgg

65,020
52
178
231

6

Am going to use "limitate" somewhere. – random Jan 28 '10 at 09:35
`border: 0px` is the way for removing borders (instead of `border: none`)! – Veger Jan 28 '10 at 10:04
5

In terms of optimization border: 0 no need for the 'px' – guzart Jan 28 '10 at 10:57
2

@uberneet : that's true. I like adding px so that it's easy to change in firebug in case I want to increase the size later dynamically. I edited my answer to mention it thought – marcgg Jan 28 '10 at 11:06
All browser and all mobile are not 100%! check my replies – KingRider Sep 14 '16 at 12:42

KingRider · Answer 3 · 2016-06-21T15:13:45.507

img need src to use border is remover, i no know a why css is crazy

data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7

So try example with SRC:

img.logo {
 width: 200px;
    height: 50px;
 background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}

<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">

So try example without SRC:

img.logo {
 width: 200px;
    height: 50px;
 background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}

<img class="logo">

lol... css crazy! good fun

Thanks. It solved my problem too but I still don't grasp its logic. — Mert S. Kaplan, Apr 29 '21 at 17:31

score 8 · Answer 4 · answered Jan 29 '10 at 13:56

8

it's a good idea to use a reset CSS. add this at the top of your CSS file

img, a {border:none, outline: none;}

hope this helps

answered Jan 29 '10 at 13:56

pixeltocode

5,312
11
52
69

1

border:none; Did not helped me. I needed outline:none; Thanks, master pixeltocode – The girl with red hair Oct 29 '18 at 22:31

score 2 · Answer 5 · answered Nov 19 '16 at 10:27

2

<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

answered Nov 19 '16 at 10:27

The Finest Artist

3,150
29
34

score 2 · Answer 6 · answered Jun 05 '20 at 10:27

I faced similar problem with img tag I had added following line with img tag.

<img class="my-class">

And this is the css class

.my-class{
    background-image: url('add.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 27px;
    height: 27px;
}

I changed the img tag to span tag with same css class. Border is not visible now.

<span class="my-class"></span>

score 2 · Answer 7 · answered Jul 20 '21 at 14:09

2

Use:

div {
  background: url()
}

instead of <img>. There is no borders in the div with background image.

answered Jul 20 '21 at 14:09

diesel94

121
1
11

surinder singh · Answer 8 · 2022-12-16T15:07:54.287

<img style="border:0;outline:none" width="200" height="200"
    src="this-image-dont-exists.png"
    data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
    onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />

if image dont have src or image url is not returning image, border will be there, so you have to set a empty but valid image , here is a example which will load a default image on image loading error

<img style="border:0;outline:none" width="200" height="200"
    src="this-image-dont-exists.png"
    data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
    onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />

score 1 · Answer 9 · answered Jan 28 '10 at 09:27

1

maybe add border:none to under a.info:hover span or text-decoration:none

answered Jan 28 '10 at 09:27

jkeesh

3,289
3
29
42

score 1 · Answer 10 · answered May 13 '14 at 02:41

I realize this is a very old post, but I encountered a similar issue in which my displayed image always had a border around it. I was trying to fill the browser window with a single image. Adding styles like border:none; did not remove the border and neither did margin:0; or padding:0; or any combination of the three.

However, adding position:absolute;top:0;left:0; fixed the problem.

The original post above has position:absolute; but does not have top:0;left:0; and this was adding a default border on my page.

To illustrate the solution, this has a white border (to be precise, it has a top and left offset):

<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">

This does not have a border:

<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">

Hopefully this helps someone finding this post looking to resolve a similar problem.

score 1 · Answer 11 · answered Jul 02 '21 at 10:51

1

img {
  text-indent: -20000px; /*some large value*/
}

did the trick for me (for Chrome). This will remove the alt icon as well, something to note.

answered Jul 02 '21 at 10:51

sojin

4,527
2
37
40

score 0 · Answer 12 · answered Jan 28 '10 at 09:27

0

What class do you have on the image tag?

Try this

<img src="/images/myimage.jpg" style="border:none;" alt="my image" />

answered Jan 28 '10 at 09:27

Andrew

5,215
1
23
42

score 0 · Answer 13 · answered Jan 28 '10 at 09:28

0

I usually use this on the top of css file.

img {
   border: none;
}

answered Jan 28 '10 at 09:28

Petr Peller

8,581
10
49
66

score 0 · Answer 14 · edited May 12 '19 at 16:14

0

Thank for the answers,

The border is removed for Internet Explorer, but this there for Firefox.

So, I added this class to the img:

.clearBorder{border:none;}

And it worked!

edited May 12 '19 at 16:14

Daniel Trugman

8,186
20
41

answered Jan 28 '10 at 09:34

bahamut100

1,795
7
27
38

score 0 · Answer 15 · edited Nov 07 '16 at 18:21

0

Here's how I got rid of mine:

.main .row .thumbnail {
    display: inline-block;
    border: 0px;
    background-color: transparent;
}

edited Nov 07 '16 at 18:21

gfullam

11,531
5
50
64

answered Aug 05 '16 at 15:36

Johnny Bahbuh

1

score 0 · Answer 16 · edited Mar 15 '20 at 15:42

0

Also, in your html, remember to delete all blanks / line feeds / tabs between the closing tag and the opening tag.

<img src='a.png' /> <img src='b.png' /> will always display a space between the images even if the border attribute is set to 0, whereas <img src='a.png' /><img src='b.png' /> will not.

edited Mar 15 '20 at 15:42

Jason Aller

3,541
28
38
38

answered Mar 15 '20 at 15:02

Joachim Kruyswijk

1
3

score -1 · Answer 17 · answered Jan 28 '10 at 09:27

-1

I do believe you need to add the border: none style to your icon element as well.

answered Jan 28 '10 at 09:27

David Nordvall

12,404
6
32
52

score -1 · Answer 18 · answered Aug 07 '21 at 20:11

-1

Try this

<img width="30" height="30"/>

answered Aug 07 '21 at 20:11

Sajid Mehmood

483
2
6
18

1

The question asks for this to be done with CSS. – Wai Ha Lee Aug 08 '21 at 04:44

How remove border around image in css?

18 Answers18

Linked

Related