Bottom border overlay content of fieldset - html

Question

I want to accomplish a certain effect in which the bottom border of the fieldset should overlay the content inside it, with a z-index lower than the content so it could look like this:
What I got so far was the simple thing, in which each circle in contained inside the fieldset, but no effect whats so ever.
The HTML and CSS code follows. Any lead on how to accomplish it is wellcome, I researched but didn't find any documentation of the fieldset tag that helped.
fieldset {
margin-left: 80px;
margin-right: 80px;
padding-bottom: 50px;
padding-bottom: 20px;
border: 5px dotted rgb(88, 85, 86);
}
label {
float: left;
width: 25%;
margin-right: 0.5em;
padding-top: 0.2em;
text-align: right;
font-weight: bold;
}
legend {
padding: 0.2em 0.5em;
max-width: 475px;
color: rgb(88, 85, 86);
text-align: center;
font-family: 'gotham-book';
font-size: 32px;
}
<form>
<fieldset>
<legend>Veja como é fácil participar</legend>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12" style="margin-left: 9%">
<div class="circles circle-yellow">
<img class="img-responsive" src="\galeria\repositorio\images\landing\mensalidades-iguais\money.png">
<p class="yellow-texto">
Mensalidades que cabem no seu bolso
</p>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-yellow">
<h1 class="yellow-parcelas">12x</h1>
<p class="yellow-texto">
parcelas iguais
</p>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-red">
<span class="red-span">R$</span>
<h1 class="red-parcelas">162</h1>
<p class="red-texto">
mensais
</p>
<small class="red-small">R$ 1.944,00 ANUAL</small>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-light-blue">
<span class="light-blue-span">R$</span>
<h1 class="light-blue-parcelas">37</h1>
<p class="light-blue-texto">
mensais
</p>
<p class="light-blue-texto">
material
</p>
<p class="light-blue-texto">
didático
</p>
<small class="light-blue-small">R$ 444,00 ANUAL</small>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div class="circles circle-dark-blue">
<div class="dark-blue-texto">total</div>
<span class="dark-blue-span">R$</span>
<h1 class="dark-blue-parcelas">162</h1>
<p class="dark-blue-texto">
mensais
</p>
<small class="dark-blue-small">R$ 1.944,00 ANUAL</small>
</div>
</div>
</fieldset>
</form>

Answer 1

The trick is to use absolute positioning to take advantage of the z-index, as shown in my JS Fiddle. I won't bore you with the details you can read more about it here > Link. I'll leave my code below, any further questions feel free to ask.
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 90%;
margin: 0 auto;
margin-top: 1em;
background: #ccc;
height: 200px;
border: 2px dotted #f0f;
}
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
width: 80%;
height: 200px;
background: #f0f;
margin-top: 100px;
}
<div class="wrap">
<div class="inner">
<!-- Your Icons here. -->
</div>
</div>
NOTE:
If this answer met your needs don't forget to mark it as correct for other users to find when surfing the web. Thanks.
Regards,
-B