如何在网格内部添加褪色边框？

Question

我目前正在基于一个设计在Bootstrap 4中的网站上工作。我想不出一个元素如何在CSS中进行处理。

我可以轻松地进行网格和内容处理。问题在于在每个边框上都加入了淡入淡出效果

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 mb-5 px-2 px-md-5">
    <div class="row justify-content-center text-center">
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has 3+ months MOT </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It is not an import </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">       
            <h5 class="red pr-0"> It is not an insurance write off </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has never been used for private/commercial hire, rental, driving tuition </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has no serious mechanical issues </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> You have the V5 in your name </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has full service history </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0">It has no more than 50,000 miles</h5>
        </div>
    </div>
</div>