| <!doctype html> |
| <style> |
| div { |
| width: 10px; |
| height: 100px; |
| display: inline-block; |
| border-width: 85px; |
| } |
| .dashed { |
| border-style: dashed; |
| border-top-color: rgba(0, 255, 0, 0.75); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.75); |
| border-left-color: rgba(0, 0, 255, 0.75); |
| } |
| .dotted { |
| border-style: dotted; |
| border-top-color: rgba(0, 255, 0, 0.5); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.75); |
| border-left-color: rgba(0, 0, 255, 0.5); |
| } |
| .solid { |
| border-style: solid; |
| border-top-color: rgba(0, 255, 0, 0.5); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.5); |
| border-left-color: rgba(0, 0, 255, 0.5); |
| } |
| .double { |
| border-style: double; |
| border-top-color: rgba(0, 255, 0, 0.5); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.25); |
| border-left-color: rgba(0, 0, 255, 0.5); |
| |
| } |
| .groove { |
| border-style: groove; |
| border-top-color: rgba(0, 255, 0, 0.5); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.25); |
| border-left-color: rgba(0, 0, 255, 0.25); |
| |
| } |
| .ridge { |
| border-style: ridge; |
| border-top-color: rgba(0, 255, 0, 0.5); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.15); |
| border-left-color: rgba(0, 0, 255, 0.25); |
| |
| } |
| .inset { |
| border-style: inset; |
| border-top-color: rgba(0, 255, 0, 0.5); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.25); |
| border-left-color: rgba(0, 0, 255, 0.15); |
| |
| } |
| .outset { |
| border-style: outset; |
| border-top-color: rgba(0, 255, 0, 0.15); |
| border-right-color: rgba(0, 0, 255, 0.75); |
| border-bottom-color: rgba(0, 255, 0, 0.25); |
| border-left-color: rgba(0, 0, 255, 0.15); |
| |
| } |
| </style> |
| <div class="dashed"></div> |
| <div class="dotted"></div> |
| <div class="solid"></div> |
| <div class="double"></div> |
| <br> |
| <div class="groove"></div> |
| <div class="ridge"></div> |
| <div class="inset"></div> |
| <div class="outset"></div> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsTextWithPixelResults(); |
| </script> |
