CSS Cards with Border and Shadow effects

In this article. We will design the Card with outline border and hover shadow effects with pure CSS. 

Let's first start with HTML.

HTML Structure

<div class="card pink">
  <div class="card__image">
    <img src="images/1.jpg">
  </div>
</div>
<div class="card double purple">
  <div class="card__image">
    <img src="images/2.jpg">
  </div>
</div>
<div class="card blue top-bottom">
  <div class="card__image">
    <img src="images/3.jpg">
  </div>
</div>
<div class="card white both">
  <div class="card__image">
    <img src="images/4.jpg">
  </div>
</div>

CSS Style

.card {
  position: relative;
  width: 300px;
  height: 375px;
  margin: 0 auto;
  cursor: pointer;
  margin-bottom: 100px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}
.card .card__image {
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}
.card .card__image img {
  width: 300px;
  height: 375px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.card::before, .card::after {
  position: absolute;
  content: '';
  left: -10px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}
.card::before {
  width: 1px;
  height: 100%;
  top: 10px;
}
.card::after {
  width: 100%;
  height: 1px;
  bottom: -10px;
}

/* double */
.card.double .card__image::before, .card.double .card__image::after {
  position: absolute;
  content: '';
  left: -20px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
  background: #70759A;
}
.card.double .card__image::before {
  width: 1px;
  height: 100%;
  top: 20px;
}
.card.double .card__image::after {
  width: 100%;
  height: 1px;
  bottom: -20px;
}
.card.double.pink::before, .card.double.pink::after {
  background: #DC3264;
}
.card.double .card__image:hover::before {
  width: 10px;
}
.card.double .card__image:hover::after {
  height: 10px;
}

/* Bottom */
.card.top-bottom::before {
  top: inherit;
  width: calc(100% - 60px);
  height: 1px;
  left: 30px;
  bottom: -30px;
}
.card.top-bottom.blue::after {
  top: inherit;
  width: calc(100% - 30px);
  height: 1px;
  left: 15px;
  bottom: -15px;
  background: #E7DEDE;
}
.card.top-bottom:hover::before {
  height: 15px;
  width: calc(100% - 60px);
}
.card.top-bottom:hover::after {
  height: 15px;
}
.card.top-bottom .card__image::before, .card.top-bottom .card__image::after {
  position: absolute;
  content: '';
  left: -20px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
  background: #70759A;
}
.card.top-bottom .card__image::before {
  width: calc(100% - 60px);
  height: 1px;
  left: 30px;
  top: -20px;
}
.card.top-bottom .card__image::after {
  width: calc(100% - 30px);
  height: 1px;
  left: 15px;
  top: -10px;
  background: #E7DEDE;
}
.card.top-bottom .card__image:hover::before {
  width: calc(100% - 60px);
  height: 10px;
  background: #92AFD0;
}
.card.top-bottom .card__image:hover::after {
  height: 10px;
  background: #E7DEDE;
}
.card.both .card__image::before, .card.both .card__image::after {
  position: absolute;
  content: '';
  left: -20px;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
  background: #E0CDCD;
}
.card.both .card__image::before {
  width: 1px;
  height: 100%;
  right: -10px;
  left: inherit;
  top: -10px;
}
.card.both .card__image::after {
  width: 100%;
  height: 1px;
  top: -10px;
  left: 10px;
}
.card.both.pink::before, .card.both.pink::after {
  background: #DC3264;
}
.card.both .card__image:hover::before {
  width: 10px;
}
.card.both .card__image:hover::after {
  height: 10px;
}

/* Pink card */
.card.pink::before, .card.pink::after {
  background: #DC3264;
}
/* Purple card */
.card.purple::before, .card.purple::after {
  background: #D6A3AC;
}
/* Blue */
.card.blue::before, .card.blue::after {
  background: #92AFD0;
}
/* White */
.card.white::before, .card.white::after {
  background: #fff;
}

.card:hover::before {
  width: 10px;
}
.card:hover::after {
  height: 10px;
}