<style>
div > div {
display: inline-block;
}
span {
padding-inline-start: 15px; padding-inline-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;">
<br> </span>
</div>
<div>
<span style="border-style: groove;">
<br> </span>
</div>
<div>
<span style="border-style: ridge;">
<br> </span>
</div>
<div>
<span style="border-style: outset;">
<br> </span>
</div>
<div>
<span style="border-style: inset;">
<br> </span>
</div>
<div>
<span style="border-style: double;">
<br> </span>
</div>
</div>
<div class="rounded">
<div>
<span style="border-style: solid;">
<br> </span>
</div>
<div>
<span style="border-style: groove;">
<br> </span>
</div>
<div>
<span style="border-style: ridge;">
<br> </span>
</div>
<div>
<span style="border-style: outset;">
<br> </span>
</div>
<div>
<span style="border-style: inset;">
<br> </span>
</div>
<div>
<span style="border-style: double;">
<br> </span>
</div>
</div>
</div>