blob: 427ca957cb652981a160a8bbdc24c571d3fc77cc [file] [log] [blame]
<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;">
&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>