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

.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 > 
  <div ><i ></i>  Popular</div>
  <div ><i ></i>  Lo último</div>
  <div ><img src="assets/img/covers/cover1.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover2.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover3.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover4.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover5.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover6.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover7.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover8.jpg"><a>Nombre de la cancion</a></div>
  <div ><img src="assets/img/covers/cover9.jpg"><a>Nombre de la cancion</a></div>
  <div ><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

CodePudding user response：

Three CSS properties are especially useful for creating borders:

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.

CodePudding user response：

.can-last > * , .can-pop > * {
 border: 1px solid black;
}

CodePudding user response：

Maybe something like following snippet:

.migrid {   
  background: #1d6366;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 1em;
  row-gap: 1em;
  column-gap: 1em;
}
.can-pop, .can-last, .popular, .reciente {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1em;
  padding: 1em;
  border: 1px solid #01f2fe;
}
.popular, .reciente {
  font-size: 1.2em;
}
.migrid div i {   
  color: #01f2fe;
}
.migrid div img {   
  border-radius: 10px;
  width:15%;
}
.migrid div a {   
  font-size: 1em;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div > 
  <div ><i ></i>  Popular</div>
  <div ><i ></i>  Lo último</div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div ><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
</div>