Cómo aumentar el espacio entre puntos de borde punteados

Estoy usando un borde de estilo punteado en mi cuadro como

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

Quiero aumentar el espacio entre cada punto del borde.

Este truco funciona tanto para bordes horizontales como verticales:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

Puede ajustar el tamaño con el tamaño de fondo y la proporción con los porcentajes de gradiente lineal. En este ejemplo, tengo una línea punteada de puntos de 1 px y espaciado de 2 px. De esta manera, también puede tener múltiples bordes punteados utilizando múltiples fondos.

Pruébelo en este JSFiddle o eche un vistazo al ejemplo de fragmento de código:

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}

<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

Aquí hay un truco que he usado en un proyecto reciente para lograr casi todo lo que quiero con bordes horizontales. Uso <hr/>cada vez que necesito un borde horizontal. La forma básica de agregar un borde a esta hora es algo así como

 hr {border-bottom: 1px dotted #000;}

Pero si desea tomar el control del borde y, por ejemplo, aumentar el espacio entre puntos, puede intentar algo como esto:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

Y a continuación, crea su borde (aquí hay un ejemplo con puntos)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

Esto también significa que puede agregar sombras de texto a los puntos, gradientes, etc. Cualquier cosa que desee ...

Bueno, funciona muy bien para bordes horizontales. Si necesita verticales, puede especificar una clase para otra hora y usar la rotationpropiedad CSS3 .

No puede hacerlo con CSS puro: la especificación CSS3 incluso tiene una cita específica sobre esto:

Nota: No hay control sobre el espaciado de los puntos y guiones, ni sobre la longitud de los guiones. Se recomienda que las implementaciones elijan un espacio que haga que las esquinas sean simétricas.

Sin embargo, puede usar una imagen de borde o una imagen de fondo que haga el truco.

Utiliza el borde CSS estándar y un pseudo elemento + desbordamiento: oculto. En el ejemplo, obtienes tres bordes discontinuos de 2px diferentes: normal, espaciado como un 5px, espaciado como un 10px. En realidad, es 10px con solo 10-8 = 2px visibles.

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

Aplicado a elementos pequeños con grandes esquinas redondeadas puede hacer algunos efectos divertidos.

Entonces, comenzando con la respuesta dada y aplicando el hecho de que CSS3 permite múltiples configuraciones, el siguiente código es útil para crear un cuadro completo:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

<div id="border">
  bordered area
</div>

Vale la pena señalar que el tamaño de fondo de 10px da el área que cubrirá el guión y el espacio. El 50% de la etiqueta de fondo es qué tan ancho es realmente el guión. Por lo tanto, es posible tener guiones de diferentes longitudes en cada lado del borde.

Consulte los documentos de MDN para conocer los valores disponibles para border-style:

• none: sin borde, establece el ancho en 0. Este es el valor predeterminado.
• oculto: igual que 'ninguno', excepto en términos de resolución de conflictos fronterizos para elementos de tabla.
• discontinuo: serie de guiones cortos o segmentos de línea.
• punteado: serie de puntos.
• doble: dos líneas rectas que se suman a la cantidad de píxeles definida como ancho de borde.
• surco: efecto tallado.
• recuadro: hace que el cuadro parezca incrustado.
• Inicio: opuesto a 'recuadro'. Hace que el cuadro aparezca en 3D (en relieve).
• cresta: opuesta a 'groove'. El borde aparece en 3D (saliendo).
• sólido: línea simple, recta y sólida.

Aparte de esas opciones, no hay forma de influir en el estilo del borde estándar.

Si las posibilidades no son de su agrado, puede usar CSS3, border-imagepero tenga en cuenta que el soporte del navegador para esto todavía es muy irregular.

Construyendo una solución de 4 bordes basada en la respuesta de @ Eagorajose con sintaxis abreviada:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}

<div id="page"></div>

Este es un tema antiguo, pero aún muy relevante. La respuesta principal actual funciona bien, pero solo para puntos muy pequeños. Como Bhojendra Rauniyar ya señaló en los comentarios, para puntos más grandes (> 2px), los puntos aparecen cuadrados, no redondos. Encontré esta página buscando puntos espaciados , no cuadrados espaciados (o incluso guiones, como algunas respuestas aquí usan).

Sobre la base de esto, solía radial-gradient. Además, utilizando la respuesta de Ukuser32 , las propiedades de punto se pueden repetir fácilmente para los cuatro bordes. Solo las esquinas no son perfectas.

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}

<div>Some content with round, spaced dots as border</div>

El radial-gradient espera :

• la forma y opcional posición
• dos o más paradas: un color y radio

Aquí, quería un punto de 5 píxeles de diámetro (radio de 2.5 píxeles), con 2 veces el diámetro (10 píxeles) entre los puntos, sumando hasta 15 píxeles. El background-sizedebe coincidir con estos.

Las dos paradas se definen de modo que el punto sea agradable y suave: negro sólido para la mitad del radio y que un gradiente al radio completo.

Esta es una pregunta muy antigua, pero tiene una clasificación alta en Google, por lo que voy a incluir mi método, que podría funcionar según sus necesidades.

En mi caso, quería un borde de trazos gruesos que tuviera una ruptura mínima entre guiones. Utilicé un generador de patrones CSS (como este: http://www.patternify.com/ ) para crear un patrón de 10 px de ancho por 1 px de alto. 9px de eso es color de guión sólido, 1px es blanco.

En mi CSS, incluí ese patrón como imagen de fondo, y luego lo amplié usando el atributo de tamaño de fondo. Terminé con un tablero repetido de 20 px por 2 px, 18 px de esa línea continua y 2 px blancos. Puede ampliarlo aún más para obtener una línea discontinua muy gruesa.

Lo bueno es que, dado que la imagen está codificada como datos, no tiene la solicitud HTTP externa adicional, por lo que no hay una carga de rendimiento. Almacené mi imagen como una variable SASS para poder reutilizarla en mi sitio.

Respuesta corta: no puedes.

Tendrá que usar la border-imagepropiedad y algunas imágenes.

Mucha gente dice "No puedes". Sí tu puedes. Es cierto que no existe una regla css para controlar el espacio entre los guiones, pero css tiene otras habilidades. No se apresure a decir que algo no se puede hacer.

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

Básicamente, la altura del borde superior (5px en este caso) es la regla que determina el "ancho" de la canaleta. O Por supuesto, necesitaría ajustar los colores para que coincidan con sus necesidades. Este también es un pequeño ejemplo para una línea horizontal, use izquierda y derecha para hacer la línea vertical.

Hice una función de JavaScript para crear puntos con un svg. Puede ajustar el espacio entre puntos y el tamaño en el código de JavaScript.

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();

div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}

<div class="dotted">Lorem Ipsum</div>

SI solo está apuntando a navegadores modernos, Y puede tener su borde en un elemento separado de su contenido, entonces puede usar la transformación de escala CSS para obtener un punto o guión más grande:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

Se necesitan muchos ajustes posicionales para alinearse, pero funciona. Al cambiar el grosor del borde, el tamaño inicial y el factor de escala, puede obtener la relación grosor-longitud que desee. Lo único que no puedes tocar es la relación de tablero a espacio.

<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

esto es lo que hice: use una imagen ingrese la descripción de la imagen aquí

AFAIK no hay una manera de hacer esto. Podría usar un borde punteado o tal vez aumentar un poco el ancho del borde, pero con CSS es imposible obtener puntos más espaciados.

Puede crear un lienzo (a través de javascript) y dibujar una línea de puntos dentro. Dentro del lienzo, puede controlar cuánto durará el guión y el espacio intermedio.