<div class="card pink">
  <div class="card__image">
    <img src="https://designdrastic.com/source/css-cards-with-border-and-shadow-effects/images/1.jpg">
  </div>
</div>
<div class="card double purple">
  <div class="card__image">
    <img src="https://designdrastic.com/source/css-cards-with-border-and-shadow-effects/images/2.jpg">
  </div>
</div>
<div class="card blue top-bottom">
  <div class="card__image">
    <img src="https://designdrastic.com/source/css-cards-with-border-and-shadow-effects/images/3.jpg">
  </div>
</div>
<div class="card white both">
  <div class="card__image">
    <img src="https://designdrastic.com/source/css-cards-with-border-and-shadow-effects/images/4.jpg">
  </div>
</div>

<br /><br />
<div class="text-center">
<a href="https://designdrastic.com/post/demo/css-cards-with-border-and-shadow-effects" class="a-link" target="_blank">Source</a>
</div>

body {
  background: #1c1c20;
}
.card {
  position: relative;
  width: 300px;
  height: 375px;
  margin: 50px;
  display: inline-block;
  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;
}

.a-link {
  font-size: 1.4rem;
  color: aliceblue;
}
.text-center {
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.