Copied to Clipboard!

CSS Cards with border and shadow effects

 
  .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 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;
  }
  .card.pink::before, .card.pink::after {
    background: #DC3264;
  }
  
 
  .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 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;
  }
  .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;
  }
  .card.purple::before, .card.purple::after {
    background: #D6A3AC;
  }
  

 
  .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 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;
  }
  .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.blue::before, .card.blue::after {
    background: #92AFD0;
  }
  
 
  .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 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;
  }
  .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;
  }
  .card.white::before, .card.white::after {
    background: #fff;
  }