How to make an a tag border wrap around an image

Question

I need the border to be applied to the a tag but when I do this the border doesn't wrap around the image how can I make this happen?

<div>
  <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

css:

a{
  border: 5px solid blue;
}

https://jsfiddle.net/b7qdcub1/

The question and the fiddle do not correspond to the same problem. — nashcheez, Mar 30 '17 at 12:43
you can set the border on image like this a img{border:5px solid blue;} — Baezid Mostafa, Mar 30 '17 at 12:59

score 0 · Answer 1 · answered Mar 30 '17 at 12:41

You have to apply display: block to your a tag so that it behaves as a block level element. Also give it a fixed width and a height to encompass the image inside it.

Refer code:

a {
  border: 5px solid blue;
  display: block;
  width: 720px;
  height: 720px;
}

<div>
  <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

score 0 · Answer 2 · answered Mar 30 '17 at 12:42

0

I'm guessing you are trying to clip image to its bounds. Try this

a{
border: 5px solid blue;
overflow: hidden;
}

answered Mar 30 '17 at 12:42

EfeHelvaci

72
2
8

score 0 · Answer 3 · answered Mar 30 '17 at 12:45

0

    a{
  border: 5px solid blue;
  display:inline-block;
}

answered Mar 30 '17 at 12:45

J nui

188
1
13

score 0 · Accepted Answer · edited May 23 '17 at 12:25

If you want to know about Why anchor tag does not take height and width of its containing element Read This Answer. Instead of border property I'm using css outline.

N.B: There are lots of technique you can solve this this. like Set the border for img element or set display inline-block on anchor tag. Check this Fiddle for more solution

div a{
outline:5px solid blue;
}
div a img{
 vertical-align:bottom; /* Need this to clear white-space */

}

<div>
 <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

score -1 · Answer 5 · answered Mar 30 '17 at 12:41

-1

Just put a border on the div.

div {
border:solid;}

<div>
  <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

answered Mar 30 '17 at 12:41

Naomi

1,280
6
21
40

How to make an a tag border wrap around an image

5 Answers5