Looking for help to style the bottom border of my code. Here's what I have so far:
I want it to look like the image below:
Can I achieve this using pseudo-elements or do I need to add another element in the HTML?
Thank you in advance.
body {
background-color: #f3ece5;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
padding: 40px;
}
.categories-grid .single-category {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px 0;
border: 1px solid #e2d2c2;
background-color: white;
}<section class="categories">
<div class="container">
<div class="categories-grid">
<div class="single-category">
<img src="https://via.placeholder.com/200x140" alt="image" />
<h3>Title</h3>
<div class="link">
<a href="#">somewhere</a>
</div>
</div>
<div class="single-category">
<img src="https://via.placeholder.com/200x140" alt="image" />
<h3>Title</h3>
<div class="link">
<a href="#">somewhere</a>
</div>
</div>
<div class="single-category">
<img src="https://via.placeholder.com/200x140" alt="image" />
<h3>Title</h3>
<div class="link">
<a href="#">somewhere</a>
</div>
</div>
</div>
</div>
</section>