Menu with border

Question

I’m developing an application that contains a menu with border would like the menu to look like this

But I’m not getting to leave the edge like this and neither round look like this will put my css and html

 <h:panelGroup layout="block" styleClass="pagamento">
                       <button class="dropbtn">Parcelas</button><br/>
                       <p class="preco">29,90</p>
                       </h:panelGroup>

    .preco{
     margin-left: 20px;
      }

      .pagamento{

     border: 1px solid #C0C0C0;
     margin-left: 580px;
     }

Answer 1

I don’t know how to work with XHTML, but this is how I would do.

.preco {
    margin-left: 20px;
}

.pagamento {
    border: 1px solid #C0C0C0;
    margin: 0 auto;
    width: 50%;

    border-radius: 5px;
}

.dropbtn{
    margin: 10px;
}

<div class="pagamento">
<button class="dropbtn">Parcelas</button><br/>
<p class="preco">29,90</p>
</div>