Create a dotted border with SVG.

dotted-border.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
    width="4px"
    height="4px"
    viewBox="0 0 8 8"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg">

        <line
            x1="4"
            x2="4"
            y1="4"
            y2="4"
            stroke="#c5c5c5"
            stroke-width="4"
            stroke-linecap="round"
            stroke-dasharray="1, 4" />

</svg>

<!--
    Usage Examples:
    background: url(/path/dotted-border.svg) repeat-x 0 100%; /* horizontal, bottom */
    background: url(/path/dotted-border.svg) repeat-y 50% 0; /* vertical, centered */
-->