Search code examples
htmlcssimageborder

Only bottom part of image boarder is shown

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">

  1. 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 :)

Solution

  • If you are trying to make the image a clickable link you should wrap it in between the <a> tag

    <a href = " "><img src = " "></a>

    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.