Cómo aumentar el espacio entre puntos de borde punteados

286

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.

Kali Charan Rajput
fuente

Respuestas:

444

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:

Olivictor
fuente
26
Debe ser la respuesta seleccionada.
Kevin Jurkowski,
77
En mi humilde opinión es un truco de n grado.
Muhammad Umer
77
Quiero hacer lo mismo, pero el ancho del borde punteado es 3px en lugar de 1px y ahora se vuelve cuadrado en lugar de punteado.
Bhojendra Rauniyar
55
Hice un SCSS mixin para implementar esto y cambiar colores y espacios rápidamente. Compruébelo en github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin .
Flor Braz
55
¿Qué pasa si quiero los 4 bordes discontinuos?
Ryan Shillington
141

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 .

Mate
fuente
2
¿Es compatible este navegador cruzado?
J82
57
No puedo imaginar qué dolor en el a ** que sería mantener.
Kzqai
1
¿Cómo obtener el mismo efecto para el vertical?
Rinku
44
@Rinku con transformación: rotar (90 grados); bloqueo de pantalla;
Jeroen K
44
tan feo, pero tan inteligente :) También noto que puedo tener un control más fino sobre la ubicación si configuro la altura: 0; y use relleno para controlar la colocación. Así que quería la línea de puntos en la parte inferior con un pequeño espacio debajo, así que utilicé el relleno: 0 0 10px;
MatthewLee
121

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.

Shadikka
fuente
77
Puede usar gradientes (CSS puro) para un borde totalmente personalizable. Vea la respuesta a continuación
Olivictor
3
-1, @Shadikka, lo que dice la especificación CSS3 es que no se puede hacer usando border: dotted, pero es posible hacerlo usando gradientes como lo ha demostrado la respuesta de Eagorajose.
Pacerier
30

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.

lenioia
fuente
2
Trabajo fuerte! Esta es la única de estas respuestas que realmente funciona sin ser terrible de mantener, en mi opinión. Incluso la respuesta aceptada solo funciona para un borde del div. Esto funciona para toda la frontera.
Ryan Shillington
1
Esta es, con mucho, la mejor y más elegante respuesta. Debería marcarse como la solución ...
Beejee
19

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.

Ukuser32
fuente
17

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.

Pekka
fuente
gracias pekka, eso significa que no puedo usar la propiedad de borde ... así que tengo que usar la imagen para ello.
Kali Charan Rajput
@kc si ninguno de los estilos de borde es de su agrado, sí.
Pekka
8

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>

Aleksander Stelmaczonek
fuente
8

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.

Marten Koetsier
fuente
6

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.

Nick Angiolillo
fuente
2

Respuesta corta: no puedes.

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

Crozin
fuente
2

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.

devinfd
fuente
1
Para ser justos, creo que la mayoría de la gente dice que no puedes hacerlo con la cuestión literal de ajustar el estilo punteado del borde. No están diciendo que algo similar no sea posible usando otras propiedades CSS. En mi opinión, tiene mucho más sentido desde un punto de vista semántico usar una imagen de fondo o una imagen de borde como otros han mostrado, que usar pseudo elementos y una docena de líneas de CSS.
Alex
2

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>

dmodo
fuente
1

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.

Dave
fuente
Al hacerlo, el contenido también se aplicaráscale(8)
Pardeep Jain
borde: 1px negro punteado; se considera propiedad desconocida en el navegador Chrome.
Inzmam ul Hassan
1
<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í

Christine Nicole Yu
fuente
0

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.

Bojangles
fuente
0

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.

velop
fuente
Esa es una solución muy complicada. No puedo evitar sentir que esto también costaría un poco más en rendimiento y tiempos de carga percibidos, dependiendo del peso del resto del JS en la página.
Emmett R.