Como aumentar o espaço entre os pontos da borda pontilhada

Estou usando borda pontilhada na minha caixa como

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

Quero aumentar o espaço entre cada ponto da borda.

Este truque funciona para bordas horizontais e verticais:

/*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;

Você pode ajustar o tamanho com o tamanho do plano de fundo e a proporção com as porcentagens de gradiente linear. Neste exemplo, tenho uma linha pontilhada de pontos 1px e espaçamento 2px. Dessa forma, você também pode ter várias bordas pontilhadas usando vários fundos.

Experimente neste JSFiddle ou dê uma olhada no exemplo de trecho 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>

Aqui está um truque que usei em um projeto recente para obter quase tudo o que desejo com bordas horizontais. Uso <hr/>sempre que preciso de uma borda horizontal. A maneira básica de adicionar uma borda a essa hora é algo como

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

Mas se você quiser controlar a borda e, por exemplo, aumentar o espaço entre os pontos, tente algo como isto:

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

E a seguir, você cria sua borda (aqui está um exemplo com pontos)

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

Isso também significa que você pode adicionar sombra de texto aos pontos, gradientes etc. Tudo o que quiser ...

Bem, funciona muito bem para bordas horizontais. Se você precisar de verticais, poderá especificar uma classe para outra hora e usar a rotationpropriedade CSS3 .

Você não pode fazer isso com CSS puro - a especificação CSS3 ainda tem uma citação específica sobre isso:

Nota: Não há controle sobre o espaçamento dos pontos e traços, nem sobre o comprimento dos traços. As implementações são incentivadas a escolher um espaçamento que torne os cantos simétricos.

No entanto, você pode usar uma imagem de borda ou uma imagem de fundo que faça o truque.

Isso usa a borda CSS padrão e um pseudo-elemento + estouro: oculto. No exemplo, você obtém três bordas tracejadas 2px diferentes: normal, espaçada como 5px, espaçada como 10px. Na verdade, é 10px com apenas 10-8 = 2px visível.

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>

A aplicação em pequenos elementos com grandes cantos arredondados pode resultar em alguns efeitos divertidos.

Então, começando com a resposta dada e aplicando o fato de que o CSS3 permite várias configurações - o código abaixo é útil para criar uma caixa completa:

#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 a pena notar que os 10 px no tamanho do plano de fundo fornecem a área que o traço e o espaço cobrirão. Os 50% da marca de segundo plano são a largura do traço. Portanto, é possível ter traços de comprimento diferentes em cada lado da borda.

Consulte os documentos MDN para obter os valores disponíveis para border-style:

• nenhum: sem borda, define a largura como 0. Esse é o valor padrão.
• oculto: O mesmo que 'nenhum', exceto em termos de resolução de conflitos de borda para elementos da tabela.
• tracejado: Série de traços curtos ou segmentos de linha.
• pontilhado: Série de pontos.
• double: duas linhas retas que somam a quantidade de pixels definida como largura da borda.
• sulco: efeito esculpido.
• inserção: Faz a caixa parecer incorporada.
• início: Oposto de 'inserção'. Faz com que a caixa apareça em 3D (em relevo).
• cume: Oposto de 'sulco'. A borda aparece em 3D (saindo).
• sólido: linha única, reta e sólida.

Além dessas opções, não há como influenciar o estilo da borda padrão.

Se as possibilidades não são do seu agrado, você pode usar o CSS3, border-imagemas observe que o suporte ao navegador para isso ainda é muito irregular.

Solução de construção de 4 arestas com base na resposta de @ Eagorajose com sintaxe 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 é um tópico antigo, mas ainda muito relevante. A resposta superior atual funciona bem, mas apenas para pontos muito pequenos. Como Bhojendra Rauniyar já apontou nos comentários, para pontos maiores (> 2px), os pontos aparecem quadrados, não redondos. Encontrei esta página procurando pontos espaçados , não quadrados espaçados (ou até traços, como algumas respostas aqui usam).

Com base nisso, eu usei radial-gradient. Além disso, usando a resposta do Ukuser32 , as propriedades do ponto podem ser facilmente repetidas para todas as quatro bordas. Apenas os cantos não são perfeitos.

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>

O radial-gradient espera :

• a forma e opcional posição
• duas ou mais paradas: cor e raio

Aqui, eu queria um ponto de 5 pixels de diâmetro (raio de 2,5px), com 2 vezes o diâmetro (10px) entre os pontos, totalizando 15px. O background-sizedeve corresponder a estes.

As duas paradas são definidas de modo que o ponto seja agradável e suave: preto sólido por metade do raio e um gradiente para o raio completo.

Esta é uma pergunta muito antiga, mas tem uma classificação alta no Google, então vou usar meu método que pode funcionar dependendo de suas necessidades.

No meu caso, eu queria uma borda espessa e tracejada que tivesse um intervalo mínimo entre os traços. Eu usei um gerador de padrões CSS (como este: http://www.patternify.com/ ) para criar um padrão de 10px de largura por 1px de altura. 9px dessa cor é sólida, e 1px é branco.

No meu CSS, incluí esse padrão como imagem de plano de fundo e o ampliei usando o atributo de tamanho do plano de fundo. Acabei com um traço repetido de 20 por 2 pixels, sendo 18 em linhas sólidas e 2 em branco. Você pode escalá-lo ainda mais para uma linha tracejada muito grossa.

O bom é que, como a imagem é codificada como dados, você não possui a solicitação HTTP externa adicional, portanto, não há ônus no desempenho. Armazenei minha imagem como uma variável SASS para poder reutilizá-la no meu site.

Resposta curta: você não pode.

Você terá que usar a border-imagepropriedade e algumas imagens.

Tantas pessoas dizem "Você não pode". Sim você pode. É verdade que não existe uma regra de CSS para controlar o espaço da sarjeta entre os traços, mas o CSS tem outras habilidades. Não seja tão rápido em dizer que nada pode ser feito.

.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%;
}

Basicamente, a altura do topo da borda (5px neste caso) é a regra que determina a "largura" da sarjeta. Claro que você precisaria ajustar as cores para atender às suas necessidades. Este também é um pequeno exemplo para uma linha horizontal, use esquerda e direita para fazer a linha vertical.

Eu fiz uma função javascript para criar pontos com um svg. Você pode ajustar o espaçamento e o tamanho dos pontos no código 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>

Se você está segmentando apenas navegadores modernos, E pode ter sua borda em um elemento separado do seu conteúdo, use a transformação de escala CSS para obter um ponto ou traço maior:

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

É preciso muito ajuste posicional para alinhar, mas funciona. Alterando a espessura da borda, o tamanho inicial e o fator de escala, você pode obter a proporção de espessura e comprimento desejada. A única coisa que você não pode tocar é na proporção entre traços e intervalos.

<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>

isto é o que eu fiz - use uma imagem, digite a descrição da imagem aqui

AFAIK não existe uma maneira de fazer isso. Você pode usar uma borda tracejada ou talvez aumentar um pouco a largura da borda, mas é impossível obter mais pontos espaçados com CSS.

Você pode criar uma tela (via javascript) e desenhar uma linha pontilhada dentro. Dentro da tela, você pode controlar quanto tempo o traço e o espaço intermediário deverão ser.