<!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>