Customize your CSS Border 🚀

With this tool you can simply increase space between dots, change dash length or distance between strokes.

Width:

Height:

Note: It doesn't impact on generated style.

Stroke width: {{ currentStyle.width }}

Dash Array

It's a sequence of visible/invisible intervals.

Line Cap

Dash offset: {{ currentStyle.dashOffset }}

Border radius: {{ currentStyle.borderRadius }}

{{ output }}

Usage

Just copy the output and paste it into your CSS code. For example:

.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");
}

How does it work?

Native CSS properties don't support the customization of border-style. Therefore, we use a trick with an SVG image inside background-image property. The SVG features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap. Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have.