.boxscoop {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
 
  height: 300px;
}

.boxscoop:hover .borderscoop {
  border: 5px solid #AB7C14;
}

.boxscoop:hover .scoop {
  border: 5px solid #AB7C14;
}

.borderscoop {
  height: 100%;
  width: 100%;
  position: absolute;
  border: 5px solid #AB7C14;
  transition: border 300ms ease;
}
.bkc{
  background-color: #fff;
}
.borderscoop1 {
  height: 100%;
  width: 100%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom: 5px solid #AB7C14;
  border-right: 5px solid #AB7C14;
  border-top: 5px solid #AB7C14;
  transition: border 300ms ease;

}
.borderscoop2 {
  height: 100%;
  width: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #fff;
  border-bottom: 5px solid #AB7C14;
  border-left: 5px solid #AB7C14;
  border-right: 5px dotted #AB7C14;
  border-top: 5px solid #AB7C14;
  transition: border 300ms ease;
  box-shadow: 2px 2px 2px 2px #fff;
}

.borderscoop3 {
  height: 100%;
  width: 100%;
  border-top-right-radius: 20px;
  border-top-left-radius : 20px;
  border-left: 5px solid #AB7C14;
  border-right: 5px solid #AB7C14;
  border-top: 5px solid #AB7C14;
  transition: border 300ms ease;

}
.borderscoop2 {
  height: 100%;
  width: 100%;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius : 20px;
  background-color: #fff;
  border-bottom: 5px solid #AB7C14;
  border-bottom: 5px solid #AB7C14;
  border-right: 5px dotted #AB7C14;
  border-top: 5px solid #AB7C14;
  transition: border 300ms ease;
  box-shadow: 2px 2px 2px 2px #fff;
}
.scoop {
  background: #fff;
  border: 5px solid #AB7C14;
  position: absolute;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  transition: border 300ms ease;
}

.scoop1 {
  left: -45px;
  top: -30px;
 
}

.scoop2 {
  right: -15px;
  top: -30px;

}

.scoop3 {
  left: -45px;
  bottom: -30px;

}

.scoop4 {
  right: -15px;
  bottom: -30px;

}