increase space between border dots css 1

increase space between border dots css

.block {
   width: 100px;
   height: 100px;
   /* dashed border */
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

Here is what the above code is Doing:
1. The background-image property is set to a data URI.
2. The data URI is a SVG image.
3. The SVG image is a rectangle with a dashed border.
4. The rectangle is 100px by 100px.
5. The border is 4px wide.
6. The border is dashed with a 6px dash and a 14px gap.
7. The border is black.

Similar Posts