| <!DOCTYPE html> |
| <style> |
| div { |
| margin: 2px 20px 10px 20px; |
| padding: 2px 10px; |
| outline-width: 8px; |
| outline-color: rgba(0, 0, 255, 0.3); |
| display: inline-block; |
| } |
| |
| div.solid { |
| outline-style: solid; |
| } |
| |
| div.auto { |
| outline-style: auto; |
| } |
| |
| div.dotted { |
| outline-style: dotted; |
| } |
| |
| div.dashed { |
| outline-style: dashed; |
| } |
| |
| div.double { |
| outline-style: double; |
| } |
| |
| div.ridge { |
| outline-style: ridge; |
| } |
| |
| div.groove { |
| outline-style: groove; |
| } |
| |
| div.inset { |
| outline-style: inset; |
| } |
| |
| div.outset { |
| outline-style: outset; |
| } |
| </style> |
| |
| The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners.<br><br> |
| |
| <div class="solid"></div> |
| <div class="solid"></div> |
| <div class="solid"></div> |
| <div class="solid"></div> |
| <div class="solid"></div> |
| <div class="solid"></div> |
| <div class="solid"></div> |
| <div class="solid"></div> |
| solid<br><br> |
| |
| <div class="double"></div> |
| <div class="double"></div> |
| <div class="double"></div> |
| <div class="double"></div> |
| <div class="double"></div> |
| <div class="double"></div> |
| <div class="double"></div> |
| <div class="double"></div> |
| double<br><br> |
| |
| <div class="dotted"></div> |
| <div class="dotted"></div> |
| <div class="dotted"></div> |
| <div class="dotted"></div> |
| <div class="dotted"></div> |
| <div class="dotted"></div> |
| <div class="dotted"></div> |
| <div class="dotted"></div> |
| dotted<br><br> |
| |
| <div class="dashed"></div> |
| <div class="dashed"></div> |
| <div class="dashed"></div> |
| <div class="dashed"></div> |
| <div class="dashed"></div> |
| <div class="dashed"></div> |
| <div class="dashed"></div> |
| <div class="dashed"></div> |
| dashed<br><br> |
| |
| <div class="ridge"></div> |
| <div class="ridge"></div> |
| <div class="ridge"></div> |
| <div class="ridge"></div> |
| <div class="ridge"></div> |
| <div class="ridge"></div> |
| <div class="ridge"></div> |
| <div class="ridge"></div> |
| ridge<br><br> |
| |
| <div class="groove"></div> |
| <div class="groove"></div> |
| <div class="groove"></div> |
| <div class="groove"></div> |
| <div class="groove"></div> |
| <div class="groove"></div> |
| <div class="groove"></div> |
| <div class="groove"></div> |
| groove<br><br> |
| |
| <div class="inset"></div> |
| <div class="inset"></div> |
| <div class="inset"></div> |
| <div class="inset"></div> |
| <div class="inset"></div> |
| <div class="inset"></div> |
| <div class="inset"></div> |
| <div class="inset"></div> |
| inset<br><br> |
| |
| <div class="outset"></div> |
| <div class="outset"></div> |
| <div class="outset"></div> |
| <div class="outset"></div> |
| <div class="outset"></div> |
| <div class="outset"></div> |
| <div class="outset"></div> |
| <div class="outset"></div> |
| outset |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(true); |
| </script> |
