Question

as you can see in the image, it isn’t just a dashed border.. but it’s like.. a double dashed border where each dash is offset by the other.

How do I make this with CSS?

Answer 1

You can simulate this with nested divs.

HTML:

<div class="border1">
    <div class="border2">
        <!-- Your content here -->
    </div>
</div>

CSS:

.border1 {
    border: 1px gray dotted;
}
.border2 {
    border: 1px gray dotted;
    width: 100%;
    height: 100%;
}

Also, here’s a fiddle to see this in action.