In addition to the border-image property, there are a few other ways to create a dashed border with control over the length of the stroke and the distance between them. They are described below:

Method 1: Using SVG

We can create the dashed border by using a path or a polygon element and setting the stroke-dasharray property. The property takes two parameters where one defines the size of the dash and the other determines the space between them.

Pros:

1. SVGs by nature are scalable graphics and can adapt to any container dimensions.
2. Can work very well even if there is a border-radius involved. We would just have replace the path with a circle like in this answer (or) convert the path into a circle.
3. Browser support for SVG is pretty good and fallback can be provided using VML for IE8-.

Cons:

1. When the dimensions of the container do not change proportionately, the paths tend to scale resulting in a change in size of the dash and the space between them (try hovering on the first box in the snippet). This can be controlled by adding vector-effect='non-scaling-stroke' (as in the second box) but the browser support for this property is nil in IE.

.dashed-vector {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
path{
  fill: none;
  stroke: blue;
  stroke-width: 5;
  stroke-dasharray: 10, 10;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
}


/* just for demo */

div{
  margin-bottom: 10px;
  transition: all 1s;
}
div:hover{
  height: 100px;
  width: 400px;
}

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

Method 2: Using Gradients

We can use multiple linear-gradient background images and position them appropriately to create a dashed border effect. This can also be done with a repeating-linear-gradient but there is not much improvement because of using a repeating gradient as we need each gradient to repeat in only one direction.

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

Pros:

1. Scalable and can adapt even if the container's dimensions are dynamic.
2. Does not make use of any extra pseudo-elements which means they can be kept aside for any other potential usage.

Cons:

1. Browser support for linear gradients is comparatively lower and this is a no-go if you want to support IE 9-. Even libraries like CSS3 PIE do not support creation of gradient patterns in IE8-.
2. Cannot be used when border-radius is involved because backgrounds don't curve based on border-radius. They get clipped instead.

Method 3: Box Shadows

We can create a small bar (in the shape of the dash) using pseudo-elements and then create multiple box-shadow versions of it to create a border like in the below snippet.

If the dash is a square shape then a single pseudo-element would be enough but if it is a rectangle, we would need one pseudo-element for the top + bottom borders and another for left + right borders. This is because the height and width for the dash on the top border will be different from that on the left.

Pros:

1. The dimensions of the dash is controllable by changing the dimensions of the pseudo-element. The spacing is controllable by modifying the space between each shadow.
2. A very unique effect can be produced by adding a different color for each box shadow.

Cons:

1. Since we have to manually set the dimensions of the dash and the spacing, this approach is no good when the dimensions of the parent box is dynamic.
2. IE8 and lower do not support box shadow. However, this can be overcome by using libraries like CSS3 PIE.
3. Can be used with border-radius but positioning them would be very tricky with having to find points on a circle (and possibly even transform).

.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}

<div class='dashed-box-shadow'>Some content</div>

Figma allow you to control exact dash length and gap:

• Border: 1 px

• Style: Dashed

• Dashes: e.g. 10, 5

• Alignment: Inside

CSS, unfortunately, does not provide a built-in dashed border with configurable dash length or gap.
Even worse:

• border-style: dashed uses the browser’s own dash algorithm → no control.

• border-image stretches the pattern around the rectangle → vertical dashes never match horizontal ones unless the box has special proportions.

If you want a border that looks exactly like Figma, you must manually draw the 4 sides with linear-gradient.

The following solution reproduces the exact Figma behavior and supports custom dash length & gap.

Pure CSS or Tailwind v4 solution:

/* Draw 4 dashed sides using a pseudo-element */
@layer utilities {
  .border-dash-box {
    position: relative;
  }

  .border-dash-box::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";

    /* fallback values when user does not override them */
    background:
      /* top */
      linear-gradient(to right, currentColor 0 var(--border-dash-length, 10px), transparent 0)
        0 0 /
        calc(var(--border-dash-length, 10px) + var(--border-dash-gap, 5px)) 1px repeat-x,

      /* bottom */
      linear-gradient(to right, currentColor 0 var(--border-dash-length, 10px), transparent 0)
        0 100% /
        calc(var(--border-dash-length, 10px) + var(--border-dash-gap, 5px)) 1px repeat-x,

      /* left */
      linear-gradient(to bottom, currentColor 0 var(--border-dash-length, 10px), transparent 0)
        0 0 /
        1px calc(var(--border-dash-length, 10px) + var(--border-dash-gap, 5px)) repeat-y,

      /* right */
      linear-gradient(to bottom, currentColor 0 var(--border-dash-length, 10px), transparent 0)
        100% 0 /
        1px calc(var(--border-dash-length, 10px) + var(--border-dash-gap, 5px)) repeat-y;

    border-radius: inherit;
  }
}

/* Dash length utility */
@utility border-dash-length-* {
  --border-dash-length: calc(var(--spacing) * --value(integer));
  --border-dash-length: --value([length]);
}

/* Gap utility */
@utility border-dash-gap-* {
  --border-dash-gap: calc(var(--spacing) * --value(integer));
  --border-dash-gap: --value([length]);
}

Usage Examples

<div class="border-dash-box text-gray-600 p-4">
  Default: dash 10px, gap 5px
</div>

Custom dash pattern

<div class="border-dash-box border-dash-length-6 border-dash-gap-3 text-blue-600 p-4">
  Dash 6px, Gap 3px
</div>

Arbitrary values

<div class="border-dash-box border-dash-length-[12px] border-dash-gap-[8px] text-red-600 p-4">
  Dash 12px, Gap 8px
</div>

You cannot do it with pure CSS - the CSS3 spec even has a specific quote about this:

Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.

You can, however, use either a border-image or a background image that does the trick.