| <!DOCTYPE html> |
| <!-- The border should be dotted, minimal dashes, and should extend |
| all the way to the corners of the background. |
| --> |
| <style> |
| .bordered { |
| margin-top: 3px; |
| height: 10px; |
| background-color: lightgreen; |
| background-clip: border-box; |
| } |
| .dot_6 { |
| width: 66px; |
| height: 66px; |
| } |
| .dot_5 { |
| width: 65px; |
| height: 65px; |
| } |
| .dot_4 { |
| width: 64px; |
| height: 64px; |
| } |
| .dot_3 { |
| width: 63px; |
| height: 63px; |
| } |
| .dot_2 { |
| width: 62px; |
| height: 62px; |
| } |
| .dot_1 { |
| width: 61px; |
| height: 61px; |
| } |
| </style> |
| <div> |
| <div style="display: inline-block;"> |
| <div class="bordered dot_6" style="border: dotted 1px black;"></div> |
| <div class="bordered dot_6" style="border: dotted 2px black;"></div> |
| <div class="bordered dot_6" style="border: dotted 3px black;"></div> |
| </div> |
| <div style="display: inline-block;"> |
| <div class="bordered dot_5" style="border: dotted 1px black;"></div> |
| <div class="bordered dot_5" style="border: dotted 2px black;"></div> |
| <div class="bordered dot_5" style="border: dotted 3px black;"></div> |
| </div> |
| <div style="display: inline-block;"> |
| <div class="bordered dot_4" style="border: dotted 1px black;"></div> |
| <div class="bordered dot_4" style="border: dotted 2px black;"></div> |
| <div class="bordered dot_4" style="border: dotted 3px black;"></div> |
| </div> |
| </div> |
| <div> |
| <div style="display: inline-block;"> |
| <div class="bordered dot_3" style="border: dotted 1px black;"></div> |
| <div class="bordered dot_3" style="border: dotted 2px black;"></div> |
| <div class="bordered dot_3" style="border: dotted 3px black;"></div> |
| </div> |
| <div style="display: inline-block;"> |
| <div class="bordered dot_2" style="border: dotted 1px black;"></div> |
| <div class="bordered dot_2" style="border: dotted 2px black;"></div> |
| <div class="bordered dot_2" style="border: dotted 3px black;"></div> |
| </div> |
| <div style="display: inline-block;"> |
| <div class="bordered dot_1" style="border: dotted 1px black;"></div> |
| <div class="bordered dot_1" style="border: dotted 2px black;"></div> |
| <div class="bordered dot_1" style="border: dotted 3px black;"></div> |
| </div> |
| </div> |
