| <!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; |
| outline: 4px solid blue; |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Test mixed border styles. --> |
| <div class="box"></div> |
| <div class="box" style="border-right-style: double"></div> |
| <div class="box" style="border-right-style: double; border-right-width: 0;"></div> |
| <div class="box" style="border-right-color: transparent;"></div> |
| <br> |
| <div class="box" style="border-right-color: transparent; border-right-width: 0;"></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> |
| <div class="box" style="border-right-color: transparent; border-right-width: 0; |
| border-bottom-style: groove;"></div> |
| <br> |
| <div class="box" style="border-right-style: double; |
| border-bottom-style: double;"></div> |
| <div class="box" style="border-right-color: transparent; border-right-width: 0; |
| border-bottom-style: double;"></div> |
| |
| <div class="box" style="border-right-color: rgba(0, 128, 0, 0.5)"></div> |
| <div class="box" style="border-left-color: rgba(0, 128, 0, 0.5); border-right-color: rgba(0, 128, 0, 0.5)"></div> |
| |
| </body> |
| </html> |
