CODEWITHSUNDEEP
htmlhyperlink
nectar
nectar

Reputation: 9679

how to remove border of a hyper-link image?

<li><a href="#" ><img src="images/hospitality.png" title="" /></a>

Problem- image is getting displayed inside a blue rectangle box in IE and Mozilla but not in Chrome.How can I remove that blue box from IE also?

Upvotes: 24

Views: 84399

Answers (5)

Neda Rezaei
Neda Rezaei

Reputation: 101

For removing this border you should set border to none.

  a img 
        {
        border:none;
        }

Upvotes: 1

user2645981
user2645981

Reputation:

external css

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

internal css

<style type="text/css">
  img { border: none; }
</style>

inline css

<img src="logo.png" style="border-style: none"/>

Upvotes: 6

MA9H
MA9H

Reputation: 1909

The "border=0" solution works, but it is not very easy to implement since it requires its addition in every and each link image you put in your project.

The better solution is to include the following tag within your page's <head>...</head> tags, which can be in a master page so that all the inner pages will inherent it from the master page

<style type="text/css">
    <!--
    img { border: none; }
    -->
</style>

Upvotes: 10

Alex
Alex

Reputation: 12443

Or add it inline to the img element: 

<li>
    <a href="#">
        <img style="border: 0;" src="images/hospitality.png" title="" />
    </a>
</li>

Upvotes: 23

Douwe Maan
Douwe Maan

Reputation: 6878

You can set this CSS to remove the blue border on every image within a link:

a img {
    border: 0;
}

Upvotes: 48

Related Questions