Lezao

Boa Tarde, pessoal! estou tentando realizar uma div com bordas e cantos arredondados, mas naun estou conseguindo colocar os conteunos em seu devido lugar. só consegui colocar os itens nos lugares em foto. Estou fazendo assim: .div1{ position: relative; width:550px; height:150px; border:solid 1px; border-radius:20px 20px 20px 20px; margin-top: 15px; } .div2{ position: absolute; left: 25%; right: 25%; border:solid 0px; border-radius:0px 0px 20px 20px; text-align: center; color: white; font-family: Gill Sans Extrabold, sans-serif; } /* somente para melhorar a visualização do exemplo */ .div1{ background: white; } .div2{ background: #2ecc71; height: 20%; } <div class='div1'> <div class='div2' style="background: #e74c3c;"><b>ENCERRADO</b></div> </div> <div class='div1'> <div class='div2' style="background: #2ecc71;"><b>EM ANDAMENTO</b></div> </div> veja exemplo na foto: