---
title: Remove Border from Image Links
date: 2009-05-02T01:09:38+00:00
modified: 2009-05-02T01:09:38+00:00
image:: https://kaspars.net/wp-content/uploads/2009/05/anchor-link-border-image-after-fix.png
permalink: https://kaspars.net/blog/remove-border-from-image-links
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
post_tag:
  - CSS
category:
  - Development
---

# Remove Border from Image Links

For illustrating anchor links in [some cases](http://www.wolfslittlestore.be/2009/05/het-aimg-probleem-oplossen/) 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](https://kaspars.net/wp-content/uploads/2009/05/anchor-link-border-image-before-fix.png?strip=all&quality=90&resize=402,346 "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](https://kaspars.net/wp-content/uploads/2009/05/anchor-link-border-image-after-fix.png?strip=all&quality=90&resize=158,88 "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.