Responsive html css Curly Braces .brace.bottom:after not working - html

Question

I have a some code for Responsive html css Curly Braces i trying to place the bottom position but its not working correctly . position top is working perfect. anyone know how to change that position to bottom.
Thanks
That's my code
.brace{
border: 2px solid #CCC;
height: 25px;
position:relative;
border-bottom: 0;
border-radius: 25px 25px 0 0;
margin-top: 25px;
}
.brace.top:after{
content: '';
position:absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: -27px;
margin-left: -25px;
background-color: #FFF;
background:
linear-gradient(135deg, transparent 10px, #CCC 0) top left,
linear-gradient(225deg, transparent 10px, #CCC 0) top right,
linear-gradient(315deg, transparent 10px, #CCC 0) bottom right,
linear-gradient(45deg, transparent 10px, #CCC 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent 25px, #CCC 26px, #FFF 28px ),
radial-gradient(circle at 100% 0, transparent 25px, #CCC 26px, #FFF 28px),none,none;
}
.brace.bottom{
border-top: 0;
border-bottom: 2px solid #CCC;
border-radius: 0 0 25px 25px;
margin-top: 0;
}
.brace.bottom:after{
content: '';
position:absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: 0px;
margin-left: -25px;
background-color: #FFF;
background:
linear-gradient(135deg, transparent 10px, #25aae1 0) top left,
linear-gradient(225deg, transparent 10px, #25aae1 0) top right,
linear-gradient(315deg, transparent 10px, #25aae1 0) bottom right,
linear-gradient(45deg, transparent 10px, #25aae1 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent 25px, #25aae1 26px, #25aae1 28px ),
radial-gradient(circle at 100% 0, transparent 25px, #25aae1 26px, #25aae1 28px),none,none;
}
<div class="wrapper">
<div class="content">
<div class="brace top"></div>
<br>
<div class="brace bottom"></div>
</div>
</div>

Answer 1

Plz follow these steps.. Depends on relative the bottom position will be aligned..
.brace {
position: static;
}
.wrapper {
position: relative;
}
.brace.top::after {
margin-top: 0;
bottom: -28px;
}
.brace.bottom:after {
content: '';
position: absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: -4px;
margin-left: -25px;
background-color: #FFF;
background: linear-gradient(135deg, transparent 10px, #CCC 0) top left, linear-gradient(225deg, transparent 10px, #CCC 0) top right, linear-gradient(315deg, transparent 10px, #CCC 0) bottom right, linear-gradient(45deg, transparent 10px, #CCC 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at 0 0, transparent 25px, #CCC 26px, #FFF 28px), radial-gradient(circle at 100% 0, transparent 25px, #CCC 26px, #FFF 28px), none, none;
transform: rotate(180deg);
}
<div class="wrapper">
<div class="content">
<div class="brace top"></div>
<br>
<div class="brace bottom"></div>
</div>
</div>