Home>
.Left-Content__Complect-Line__product__descr {
    transition: 0.1s all;
}
.Left-Content__Complect-Line__product__descr: hover {
    border: 5px solid # 9C9C9C;
    height: 320px;
    border-radius: 5px;
    border-right: none;
}
.Left-Content__Complect-Line__product__descr__h3 {
    text-align: center;
    position: relative;
    bottom: 5px;
}
.Left-Content__Complect-Line__product__descr__h3-rigt {
    margin-right: 6px;
}
.Left-Content__Complect-Line__product__descr__p {
    margin-top: 17px;
    text-align: center;
    font-size: 18px;
}
.Left-Content__Complect-Line__product__descr__price {
    text-align: center;
    font-size: 20px;
    margin-top: 15px;
}
.Left-Content__Complect-Line__product__descr__buy {
    background: # 669933;
    color: #fff;
    padding: 16px 50px 18px 50px;
    position: relative;
    left: 40px;
    top: 30px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 6px 17px -4px rgba (0,0,0,0.68);
} 

              <
/div >
  • Answer # 1

    The easiest way to make a colorborderinitially transparent, buthoverchange color.

    .Left-Content__Complect-Line__product__descr {
      border: 5px solid transparent;
      border-right: none;
      transition: 0.1s all;
      text-align: center;
    }
    .Left-Content__Complect-Line__product__descr: hover {
      border-color: # 9C9C9C;
      height: 320px;
      border-radius: 5px;
    }
    .Left-Content__Complect-Line__product__descr__h3 {
      position: relative;
      bottom: 5px;
    }
    .Left-Content__Complect-Line__product__descr__h3-rigt {
      margin-right: 6px;
    }
    .Left-Content__Complect-Line__product__descr__p {
      margin-top: 17px;
      font-size: 18px;
    }
    .Left-Content__Complect-Line__product__descr__price {
      font-size: 20px;
      margin-top: 15px;
    }
    .Left-Content__Complect-Line__product__descr__buy {
      background: # 669933;
      color: #fff;
      padding: 16px 50px 18px 50px;
      position: relative;
      //left: 40px;
      //top: 30px;
      text-align: center;
      border-radius: 5px;
      box-shadow: 0px 6px 17px -4px rgba (0, 0, 0, 0.68);
      display: inline-block;
    } 
    <
    div class= "Left-Content__Complect-Line__product__descr" >
      <
    h3 class= "Left-Content__Complect-Line__product__descr__h3" >
    <
    span class= "Left-Content__Complect-Line__product__descr__h3-rigt" >
    ჩვენი <
    /span >
    <
    br >
    ახალი კომპლექტი! <
    /h3 >
      <
    p class= "Left-Content__Complect-Line__product__descr__p" >
    ორი ერთადგილიანი სავარძელი <
    /p >
      <
    p class= "Left-Content__Complect-Line__product__descr__p" >
    ორი ტახტი <
    /p >
      <
    p class= "Left-Content__Complect-Line__product__descr__p" >
    მაგიდა <
    /p >
      <
    p class= "Left-Content__Complect-Line__product__descr__price" >
    მხოლოდ 950 ლარად! <
    /p >
      <
    a href= "#" class= "Left-Content__Complect-Line__product__descr__buy" >
    ყიდვა <
    /a >
    <
    /div >
    
  • Answer # 2

    Here are a couple of options:

    1. If you replace these rules

      .Left-Content__Complect-Line__product__descr {
          transition: 0.1s all;
          height: 340px;
       }
      .Left-Content__Complect-Line__product__descr: hover {
          border: 5px solid # 9C9C9C;
          border-radius: 5px;
      }
      
    2. Or another option

      .Left-Content__Complect-Line__product__descr {
          padding: 5px 0;
          position: relative;
          border-radius: 5px;
          height: 320px;
       }
       .Left-Content__Complect-Line__product__descr: before {
          transition: 0.2s all;
          height: 100%;
          content: "";
          position: absolute;
          width: calc (100% -10px);
       }
       .Left-Content__Complect-Line__product__descr: hover: before {
          border: 5px solid # 9C9C9C;
          border-radius: 5px;
       }