How remove border around image in css?

user_260810 0
Viewed 232819

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

css html
17 Answers

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.

user_906910

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

user_2608410

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>
user_28499030

Use:

div {
  background: url()
}

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

user_105231930

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

user_2168770 
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.

user_3888890

What class do you have on the image tag?

Try this

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

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!

user_2608100

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.

user_43015360

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

user_203980

I usually use this on the top of css file.

img {
   border: none;
}
user_1904380

Try this

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