<style>
  div > div {
    display: inline-block;
  }
  span {
    -webkit-padding-start: 15px; -webkit-padding-end:15px;
    font-size: 48px;
    background-color: #DDD;
    line-height: 2em;
    border-width: 20px;
    border-color: gray;
  }
  
  .sharp, .rounded {
    margin: 20px;
  }
  .rounded span {
    border-radius: 50%;
  }
</style>
<body>

  <div class="sharp">
    <div>
      <span style="border-style: solid;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: groove;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: ridge;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: outset;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: inset;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: double;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
  </div>

  <div class="rounded">
    <div>
      <span style="border-style: solid;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: groove;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: ridge;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: outset;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: inset;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div>
      <span style="border-style: double;">
        &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
  </div>
</div>