| <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> |
