Only bottom part of image boarder is shown - html

Question

Hello guys I'm doing a CSS/HTML course at the moment and I have to assign a border to images on my website.
1. I gave the images a class:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images>
<img src="elefant.jpg" alt="Elefant">
In my CSS file I used following code to assign the border:
.images
{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
Should be very easy code but the in Chrome it doesnt really seem to work correctly. Here a screenshot :
https://snipboard.io/VAipY8.jpg
This is probably a very beginner thing but I hope someone can help me :)

Answer 1

If you are trying to make the image a clickable link you should wrap it in between the <a> tag
<img src = " ">
And to add border to the image you should give class to the <img> tag not to the <a> tag.
Currently you are applying border to the link inside the <a> tag.

Answer 2

You're missing the closing / tag in the img tag. and the closing " in the class attribute. and the closing tag for the anchor tag. Write your code like this:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images" >
<img src="elefant.jpg" alt="Elefant" class="elephantImg" />
</a>
Change the css as follows:
img {
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
You can use this if you decide not to use the class attribute on the elephant image otherwise, if you decide to use the elephantImg class attribute use this css:
.elephantImg{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}