| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style type="text/css"> |
| .box { |
| display: inline-block; |
| box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| width: 150px; |
| height: 150px; |
| margin: 10px; |
| border-width: 50px; |
| border-color: rgba(0, 0, 0, 0.5); |
| border-style: solid; |
| border-radius:50%; |
| } |
| |
| .smaller { |
| height: 102px; |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Test mixed border styles. --> |
| <div class="box"></div> |
| <div class="box" style="border-radius: 40%"></div> |
| <div class="box" style="border-right-style: double"></div> |
| <div class="box" style="border-right-style: double; border-right-width: 0;"></div> |
| <br> |
| <div class="box" style="border-right-color: transparent;"></div> |
| <div class="box" style="border-right-color: transparent; border-right-width: 50px;"></div> |
| <div class="box" style="border-right-color: transparent; border-right-width: 0; |
| border-bottom-color: transparent;"></div> |
| <div class="box" style="border-right-color: transparent; border-right-width: 0; |
| border-bottom-color: transparent;border-bottom-width: 0"></div> |
| <br> |
| <div class="smaller box"></div> |
| <div class="smaller box" style="border-right-style: double"></div> |
| <div class="smaller box" style="border-right-color: transparent; border-right-width: 0; |
| border-bottom-color: transparent;"></div> |
| <div class="smaller box" style="border-radius: 60%"></div> |
| |
| </body> |
| </html> |
