Remove Border from Image Links

For illustrating anchor links in some cases you might want to use bottom-border instead of a default text-decoration:underline. In order to achieve that, one would use the following CSS rule:

a { text-decoration:none; border-bottom:2px solid; }

which also adds border to the bottom of all linked images. In order to remove it, you would think that setting

a img { border:none; }

would be enough. However, the truth is that it removes only the border around the image and not the one from the anchor that surrounds it:

Anchor link image border before fix

Luckily, if the image is higher than the line-height of the text, we can hide the bottom border of the image by setting:

a img { border:none; vertical-align:top; }

and you’re done.

Anchor link with hidden border around image

Why this works?

By default both anchors and images are inline elements and by applying vertical-align:top; to an image inside an anchor, we move the anchor to the top of the image. For some reason images have higher z-index than anchors.

6 Comments

  1. Livven says:

    Thank you, exactly what I was looking for!

  2. Holy shit man! I was looking for this for almost 2 hours… finally found this trick that made the thingy work!

    Thanks for sharing,

    Leniel

  3. Wow. This is an awesome technique. Worked like a charm. Do you know if there is cross-browser support for this technique?

    Thanks.

  4. Jonathan says:

    Thanks a lot Kaspers. I appreciate the response.

  5. Maxim says:

    Thank you! So easily! Before i find lesson where need just add new class for image, but add for all images this hard! That idea is great!

Leave a Reply to Leniel Macaferi Cancel reply