¿Es posible controlar la longitud y la distancia entre los trazos de borde punteado en CSS?

Este ejemplo a continuación se muestra de manera diferente entre los navegadores:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

<div>I have a dashed border!</div>

Grandes diferencias: IE 11 / Firefox / Chrome

¿Existe algún método que pueda proporcionar un mayor control de la apariencia de los bordes discontinuos?

El renderizado de CSS es específico del navegador y no conozco ningún ajuste fino, debería trabajar con imágenes según lo recomendado por Ham. Referencia: http://www.w3.org/TR/CSS2/box.html#border-style-properties

El valor de la propiedad del borde de guiones nativos no ofrece control sobre los guiones en sí mismos ... ¡así que traiga la border-imagepropiedad!

Elabora tu propia frontera con border-image

Compatibilidad : ofrece un excelente soporte para navegadores (IE 11 y todos los navegadores modernos). Se puede configurar un borde normal como respaldo para navegadores más antiguos.

Vamos a crear estos

¡Estos bordes mostrarán exactamente el mismo navegador cruzado!

Paso 1: crea una imagen adecuada

Este ejemplo tiene 15 píxeles de ancho por 15 píxeles de alto y los espacios son actualmente de 5 píxeles de ancho. Es un .png con transparencia.

Así es como se ve en Photoshop cuando se amplía:

Así es como se ve a escala:

Controlar el espacio y la longitud de la carrera

Para crear espacios o trazos más amplios / más cortos, amplíe / acorte los espacios o trazos en la imagen.

Aquí hay una imagen con espacios más amplios de 10 píxeles:

correctamente escalado =

Paso 2: crea el CSS: este ejemplo requiere 4 pasos básicos

1. Defina la fuente de la imagen del borde :

   border-image-source:url("http://i.stack.imgur.com/wLdVc.png");  

2. Opcional : defina el ancho de la imagen del borde :

   border-image-width: 1;

   El valor predeterminado es 1. También se puede configurar con un valor de píxel, un valor de porcentaje o como otro múltiplo (1x, 2x, 3x, etc.). Esto anula cualquier border-widthconjunto.

3. Defina el segmento de imagen de borde :

   En este ejemplo, el grosor de los bordes superior, derecho, inferior e izquierdo de las imágenes es de 2px, y no hay espacios fuera de ellos, por lo que nuestro valor de corte es 2:

   border-image-slice: 2; 

   Los cortes se ven así, 2 píxeles de la parte superior, derecha, inferior e izquierda:

   

4. Defina el borde-imagen-repetición :

   En este ejemplo, queremos que el patrón se repita uniformemente alrededor de nuestro div. Entonces elegimos:

   border-image-repeat: round;

Escribir taquigrafía

Las propiedades anteriores se pueden establecer individualmente o de forma abreviada usando border-image :

border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;

Ejemplo completo

Tenga en cuenta el border: dashed 4px #000retroceso. Los navegadores no compatibles recibirán este borde.

.bordered {
  display: inline-block;
  padding: 20px;
  /* Fallback dashed border
     - the 4px width here is overwritten with the border-image-width (if set)
     - the border-image-width can be omitted below if it is the same as the 4px here
  */
  border: dashed 4px #000;
  
  /* Individual border image properties */
  border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;  
  
  /* or use the shorthand border-image */
  border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/
.largeGaps {
  border-image-source: url("http://i.stack.imgur.com/LKclP.png");
  margin: 0 20px;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>

Además de la border-imagepropiedad, hay algunas otras formas de crear un borde punteado con control sobre la longitud del trazo y la distancia entre ellos. Se describen a continuación:

Método 1: usar SVG

Podemos crear el borde punteado usando pathun polygonelemento o un y estableciendo elstroke-dasharray propiedad. La propiedad toma dos parámetros donde uno define el tamaño del guión y el otro determina el espacio entre ellos.

Pros:

1. Los SVG por naturaleza son gráficos escalables y pueden adaptarse a cualquier dimensión de contenedor.
2. Puede funcionar muy bien incluso si hay un border-radiusinvolucrado. Simplemente deberíamos reemplazar el pathcon un me circlegusta en esta respuesta (o) convertir el pathen un círculo.
3. El soporte del navegador para SVG es bastante bueno y se puede proporcionar respaldo usando VML para IE8-.

Contras:

1. Cuando las dimensiones del contenedor no cambian proporcionalmente, las rutas tienden a escalar, lo que resulta en un cambio en el tamaño del guión y el espacio entre ellos (intente colocar el cursor sobre el primer cuadro del fragmento). Esto se puede controlar agregando vector-effect='non-scaling-stroke'(como en el segundo cuadro) pero el soporte del navegador para esta propiedad es nulo en 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>

Método 2: usar degradados

Podemos utilizar varias linear-gradientimágenes de fondo y colocarlas de forma adecuada para crear un efecto de borde discontinuo. Esto también se puede hacer con a, repeating-linear-gradientpero no hay mucha mejora debido al uso de un gradiente repetido, ya que necesitamos que cada gradiente se repita en una sola dirección.

.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. Escalable y adaptable incluso si las dimensiones del contenedor son dinámicas.
2. No hace uso de ningún pseudoelemento adicional, lo que significa que se pueden mantener a un lado para cualquier otro uso potencial.

Contras:

1. El soporte del navegador para gradientes lineales es comparativamente menor y esto no es posible si desea admitir IE 9-. Incluso bibliotecas como CSS3 PIE no admiten la creación de patrones de degradado en IE8-.
2. No se puede usar cuando border-radiusestá involucrado porque los fondos no se curvan en función de border-radius. En su lugar, se recortan.

Método 3: Sombras de caja

Podemos crear una pequeña barra (en la forma del guión) usando pseudoelementos y luego crear múltiples box-shadowversiones para crear un borde como en el fragmento de abajo.

Si el guión tiene forma cuadrada, un solo pseudo-elemento sería suficiente, pero si es un rectángulo, necesitaríamos un pseudo-elemento para los bordes superior + inferior y otro para los bordes izquierdo + derecho. Esto se debe a que la altura y el ancho del guión en el borde superior serán diferentes a los de la izquierda.

Pros:

1. Las dimensiones del guión se pueden controlar cambiando las dimensiones del pseudoelemento. El espaciado se puede controlar modificando el espacio entre cada sombra.
2. Se puede producir un efecto único agregando un color diferente para cada sombra de caja.

Contras:

1. Dado que tenemos que establecer manualmente las dimensiones del guión y el espaciado, este enfoque no es bueno cuando las dimensiones del cuadro principal son dinámicas.
2. IE8 y versiones inferiores no admiten la sombra de cuadro . Sin embargo, esto se puede solucionar utilizando bibliotecas como CSS3 PIE.
3. Se puede usar con, border-radiuspero colocarlos sería muy complicado al tener que encontrar puntos en un círculo (y posiblemente incluso 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>

Uno corto: No, no lo es. En su lugar, tendrá que trabajar con imágenes.

Hay una herramienta genial creada por @kovart llamada generador de bordes discontinuos .

Utiliza un svg como imagen de fondo para permitir configurar la matriz de trazos y trazos que desee, y es bastante conveniente.

Luego, simplemente lo usaría como la propiedad de fondo en su elemento en lugar del borde:

div {
  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='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

La longitud del trazo depende del ancho del trazo. Puede aumentar la longitud aumentando el ancho y ocultar parte del borde por elemento interno.

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
}

https://jsfiddle.net/ok6srt2z/

Recientemente tuve el mismo problema.

Logré resolverlo con dos divs absolutamente posicionados llevando el borde (uno para horizontal y otro para vertical), y luego transformándolos. La caja exterior solo necesita estar relativamente posicionada.

<div class="relative">
    <div class="absolute absolute--fill overflow-hidden">
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 4px 0px 4px 0px;
                transform: scaleX(2);
        "></div>
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 0px 4px 0px 4px;
                transform: scaleY(2);
        "></div>
    </div>

    <div> {{Box content goes here}} </div>
</div>

Nota: utilicé taquiones en este ejemplo, pero supongo que las clases se explican por sí mismas.

Esto creará un borde naranja y gris usando class = "myclass" en el div.

.myclass {
    outline:dashed darkorange  12px;
    border:solid slategray  14px;
    outline-offset:-14px;
}