Div border in curve shape - html

Question

I'm trying to achieve div border in the convex shape and on hover it should be in normal square shape. I have added in the bottom as same I want to add on the top I tried using before but unable to achieve the result. Can anyone help me Below is my code so far I have done.
Any help will be appreciated
* {
box-sizing: border-box;
}
.services {
position: relative;
width: 500px;
height: 420px;
margin: 100px;
background-color: #cccccc;
transition: all 0.2s ease;
animation: down-bump 0.4s ease;
}
.services:before {
}
.serv_section {
top: 83%;
position: relative;
overflow: hidden;
padding: 50px 0 0;
}
.serv_inner {
position: relative;
background: #fff;
height: 25px;
}
.serv_inner:after {
box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: -150px;
transition: all 0.4s ease-in-out;
}
.services:hover .serv_inner:after {
top: -120px;
}
.serv_inner:before {
/* box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: 130px;
transition: all 0.4s ease-in-out; */
}
span.image_caption {
position: absolute;
color: red;
padding: 10px 20px;
font-size: 30px;
z-index: 10;
animation-duration: 2.5s;
animation-fill-mode: both;
}
span.image_caption p {
font-size: 32px;
font-weight: 900;
font-family: 'Dancing Script', cursive;
color: cadetblue;
}
<div class='services'>
<div class="serv_section">
<div class="serv_inner">
</div>
</div>
</div>

Answer 1

You can use the before and after elements to make the curve, on hover hide the psuedo elements behind the element and remove the curve like this:
.services {
position: relative;
width: 100px;
height: 60px;
margin: 100px;
background-color: #cccccc;
z-index: 0;
}
.services:hover:before{
top: 0px;
border-radius: 0;
}
.services:hover:after{
bottom: 0px;
border-radius: 0;
}
.services:before, .services:after{
content: ' ';
position: absolute;
width: 100%;
height: 40px;
background-color: #cccccc;
border-radius: 50%;
z-index: -1;
transition: all .4s;
}
.services:before {
top: -20px;
}
.services:after {
bottom: -20px;
}
<div class='services'>
</div>

Answer 2

If I understand it right you can achieve this by simple using of different values for horizontal and vertical dimensions of the border-radius property (more info at https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius):
div {
background: grey;
height: 100px;
width: 200px;
transition: border-radius .15s ease-out;
}
/* border-radius on default state */
div {
border: 4px solid black;
border-radius: 50%/20px;
}
div:hover {
border-radius: 0;
}
<div></div>