blob: 93c0c0c950a3013cf1b1c63d41b4114016f8c2ad [file] [log] [blame]
<style>
body {
-webkit-writing-mode: vertical-rl;
-webkit-text-orientation: mixed;
}
div > div {
display: inline-block;
}
span {
-webkit-padding-start: 15px; -webkit-padding-end:15px;
font-size: 48pt;
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;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: groove;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: ridge;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: outset;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: inset;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: double;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
</div>
<div class="rounded">
<div>
<span style="border-style: solid;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: groove;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: ridge;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: outset;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: inset;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
<div>
<span style="border-style: double;">
&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
</div>
</div>
</div>