Consegui arredondar as bordas da div só não estou conseguindo alinhar o texto na frente da div.
Meu código está assim:
.boxEtapas {
overflow: hidden;
}
.etapas {
margin: 0 auto;
}
.etapas ul {
list-style: none;
}
.etapas ul,
li {
margin: 1px;
}
.redondo {
border-radius: 100%;
background-color: #FFFFFF;
overflow: hidden;
height: 50px;
width: 50px;
border: 1px solid #000000;
line-height: 1.0;
}
.redondoativo {
border-radius: 100%;
background-color: #337ab7;
overflow: hidden;
height: 50px;
width: 50px;
color: #FFFFFF;
text-align: center;
line-height: 1.0;
}
.textoEtapas {
float: left;
}
<div class="col-sm-6 boxEtapas" align="center">
<div class="etapas">
<ul>
<li>
<div class="redondoativo">
<br>1</div>
<div class="textoEtapas">Informações Cadastrais</div>
</li>
<li>|</li>
<li>
<div class="redondo">
<br>2</div>
<div class="textoEtapas">Selecionar Assinatura</div>
</li>
<li>|</li>
<li>
<div class="redondo">
<br>3</div>
<div class="textoEtapas">Forma de Pagamento</div>
</li>
</ul>
</div>
</div>
float: left;
nas classes.redondoativo
e.redondo
?<br>
antes do número. Depois colocaline-height: 50px
no lugar de 1.0