Small blue lines under and over an image

I have these small blue lines under and over the 2 images. I tried to apply style="border: 0;" but it didnt work. Also tried to apply the css border:0px, outline:0px in the css file. but it din't work too.

I assume that these are links or stuff like that. Anyone can help me to remove these small blue lines?

.kategorien1{
    margin-bottom: 50px;
    margin-left: 75px;
    margin-right: -35px;
    box-shadow: 0px 0px 3px 0px black;
    transition-property: all;
    transition-duration: 400ms;
}
.kategorien2{
    margin-bottom: 80px;
    margin-left: 300px;
    box-shadow: 0px 0px 3px 0px black;
    transition-property: all;
    transition-duration: 400ms;
}

<!DOCTYPE html>
<html= lang=de>
<head>
<link href="style.css" rel= "stylesheet" type="text/css">
<meta charset="utf-8">
<title>Handgefertigte Armbänder online shoppen bei handform</title>    
</head>


<body>
<!--BILDER UNTERKATEGORIEN-->
<a href="damem-lederimitat.html">
<img class="kategorien1" src="Lederimitat.jpeg" width="40%" style="border: 0;">
</a>    
<a href="damem-armreifen.html">
<img class="kategorien1" src="armreifen.jpeg" width="40%" style="border: 0;">
</a>  
<a href="damem-perlenarmbänder.html">
<img class="kategorien1" src="Perlenarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>   
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien1" src="verschiedene_b%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien2" src="M%C3%A4nnerarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>

</body>
    

</html>

Solution

It's from the a tags, as in the blue underline from the hyperlink. Add this to your css to remove them:

a {
    text-decoration: none;
}

To cover yourself totally, it might be a good idea to apply this to both states of the a tag (you know how it goes purple once clicked?), so try this css:

a, a:visited {
    text-decoration: none;
}

What this will do though, is remove the underline from all links on your page. So it might be a good idea to create a class and add it to the links you don't want underlined, like this:

a.no-underline,
a.no-underline:visited {
  text-decoration: none;
}

<a class="no-underline" href="#">This isn't underlined</a>
<a href="#">But this is!</a>