How can i put a border to the divs can-pop and can-last

Issue

.migrid
    {   
        
        padding-top: 2%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        gap:2% 10%;
    }
    .migrid div
    {   
        padding-top: 2%;
        text-align: center;
    }
    .migrid .popular
    {   
        font-size: 2vw;
    }
    .migrid .reciente
    {   
        font-size: 2vw;
    }
    .migrid div i
    {   
        color: #01f2fe;
    }
    .migrid div img
    {   
        border-radius: 10px;
        padding: 0 0 0 2%;
        width:15%;
        float: left;
    }
    .migrid div a 
    {   
        font-size: 1.2vw;
        color: white;
    }

   <div class="migrid"> 
  <div class="popular"><i class="fas fa-headphones-alt"></i>  Popular</div>
  <div class="reciente"><i class="fas fa-microphone"></i>  Lo último</div>
  <div class="can-pop"><img src="assets/img/covers/cover1.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover2.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover3.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover4.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover5.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover6.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover7.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover8.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover9.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover10.jpg"><a>Nombre de la cancion</a></div>
</div>

I dont know how to add borders to that divs jndsjnjaskdnasjkdnasjkdnjaksndjkasndjkasnjdkasnjkdsandjikasnjdkasnjkdnajskdnjkasndjkasnjdkansjkdnasjkdnjkasndjkasndjkasnjkdnasjkdnjaksndjkasndjkasndjkasndjkasnjkdansjkd

Solution

Three CSS properties are especially useful for creating borders:

• border-width
• border-style
• border-color

These are combined in the border shorthand property. Essentially, you can do something like this: border: [border width] [border style] [border color].

If you want to add borders to the <div>s themselves, then you can simply do:

.can-pop, .can-last {
  border: 1px solid black; /* Or whatever border you want. */
}

If you want to border the <img> elements in the <div>s, you can do:

.can-pop img, .can-last img {
  border: 1px solid black; /* Or whatever border you want. */
}

(See here for a tutorial on borders.)

---

Note that the above is a very simplified explanation of borders. Much more is possible, including rounding corners and placing borders on certain sides only.

Answered By - Jacob Lockard