<style> | |
body { | |
-webkit-writing-mode: vertical-lr; | |
-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;"> | |
<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> |