Add border over an image and text

Question

How do I override a border on an image and text, leaving a border for the image as the attached image:

Answer 1

One way to build this edge is by creating a pseudo-element in the element where the content is inserted, with position absolute and dimensions in % a little smaller than the elemento-pai:

.box::after{
   content: '';
   display: block;
   width: 93%;
   height: 93%;
   border: 1px solid #ddd;
   position: absolute;
   top: 3%; left: 3%;
}

Testing:

.box{
   display: block; width: 200px; text-align: center;
   position: relative; padding-bottom: 50px; float: left; margin: 0 5px;
}

.box::after{
   content: '';
   display: block;
   width: 93%;
   height: 93%;
   border: 1px solid #ddd;
   position: absolute;
   top: 3%; left: 3%;
}

.box p{
   display: inline-block; padding: 0 50px;
}

.box img{
   width: 100%;
}

<a href="#" class="box">
   <img src="https://abrilmdemulher.files.wordpress.com/2016/09/receita-bolo-chocolate-com-morango.jpg?quality=90&strip=info&w=620&h=372&crop=1" />
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <br />
   <button>SAIBA MAIS</button>
</a>

<a href="#" class="box">
   <img src="https://abrilmdemulher.files.wordpress.com/2016/09/receita-bolo-chocolate-com-morango.jpg?quality=90&strip=info&w=620&h=372&crop=1" />
   <br />
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <br />
   <button>SAIBA MAIS</button>
</a>

Answer 2

Another option is to use the class outline with offset negative. Simplifying the code would look like this:

.outline {
    outline: red 1px solid;
    outline-offset: -10px;
}

<img class="outline" src="./suaImagem.jpg" alt=" ">

[]'s