| <style> | |
| html { | |
| -webkit-writing-mode: vertical-lr; | |
| } | |
| body { | |
| -webkit-text-orientation: sideways-right; | |
| } | |
| div > div { | |
| display: inline-block; | |
| } | |
| span { | |
| padding-inline-start: 15px; padding-inline-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> |