bs4 card border
by Lalji Tadhani
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container pt-5 px-5">
<div class="card-deck">
<div class="card bg-light">
<img class="card-img-top custom" src="https://via.placeholder.com/500x180/095865/000000">
<div class="card-body text-center">
<h2 class="card-title">Lorem ipsum</h2>
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
<div class="card bg-light">
<img class="card-img-top custom" src="https://via.placeholder.com/500x180/095865/000000">
<div class="card-body text-center">
<h2 class="card-title">Lorem ipsum</h2>
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
<div class="card bg-light">
<img class="card-img-top" src="https://via.placeholder.com/500x180/095865/000000">
<div class="card-body text-center">
<h2 class="card-title">Lorem ipsum</h2>
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
</div>
</div>
CSS
.card-img-top.custom {
margin-top: -1px;
margin-left: -1px;
margin-right: -1px;
width: calc(100% + 2px);
}