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

286

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.

Kali Charan Rajput
fonte

Respostas:

444

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:

Olivictor
fonte
26
Deve ser a resposta selecionada.
Kevin Jurkowski
7
imho é um hack de n grau.
Muhammad Umer
7
Eu quero fazer a mesma coisa, mas a largura da borda pontilhada é 3px em vez de 1px e agora se torna quadrada em vez de pontilhada.
Bhojendra Rauniyar
5
Eu fiz um mix SCSS para implementar isso e alterar cores e espaçamento rapidamente. Confira em github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin .
Flor Braz
5
E se eu quiser que todas as quatro arestas sejam tracejadas?
Ryan Shillington
141

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 .

Matt
fonte
2
Este navegador é compatível?
J82
57
Não consigo imaginar que dor no a ** seria manter.
Kzqai
1
como obter o mesmo efeito para o vertical?
Rinku
4
@Rinku com transform: rotate (90deg); display: bloco;
Jeroen K
4
tão feio, mas tão inteligente :) Também noto que posso ter um controle mais preciso sobre o posicionamento se definir altura: 0; e use preenchimento para controlar o posicionamento. Então, eu queria a linha pontilhada na parte inferior com um pequeno espaço abaixo, então usei o preenchimento: 0 0 10px;
MatthewLee
121

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.

Shadikka
fonte
7
Você pode usar gradientes (CSS puro) para uma borda totalmente personalizável. Veja a resposta abaixo
Olivictor 29/03
3
-1, @Shadikka, o que a especificação CSS3 diz é que não pode ser feito usando border: dotted, mas é possível fazê-lo usando gradientes, como a resposta de Eagorajose mostrou.
Pacerier 18/09/14
30

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.

lenioia
fonte
2
Trabalho forte! Esta é a única dessas respostas que realmente funciona sem ser terrível de manter, IMO. Até a resposta aceita funciona apenas para uma extremidade da div. Isso funciona para toda a fronteira.
Ryan Shillington
1
Esta é de longe a melhor e mais elegante resposta. Deve ser marcado como a solução ...
Beejee
19

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.

Ukuser32
fonte
17

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.

Pekka
fonte
obrigado pekka, isso significa que eu não posso usar a propriedade border ... então eu tenho que usar a imagem para isso.
Kali Charan Rajput
@kc se nenhum dos estilos de borda é do seu agrado, sim.
Pekka
8

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>

Aleksander Stelmaczonek
fonte
8

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.

Marten Koetsier
fonte
6

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.

Nick Angiolillo
fonte
2

Resposta curta: você não pode.

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

Crozin
fonte
2

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.

devinfd
fonte
1
Para ser justo, acho que a maioria das pessoas está dizendo que você não pode fazer isso com a questão literal de ajustar o estilo pontilhado da borda. Eles não estão dizendo que algo semelhante não é possível usando outras propriedades CSS. Na minha opinião, faz muito mais sentido, do ponto de vista semântico, usar uma imagem de plano de fundo ou imagem de borda como outros mostraram, do que usar pseudo elementos e uma dúzia de linhas de CSS.
Alex3
2

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>

dmodo
fonte
1

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.

Dave
fonte
Ao fazê-lo conteúdo também é aplicadoscale(8)
Pardeep Jain
borda: 1px preto tracejado; é considerado propriedade desconhecida no 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>

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

Christine Nicole Yu
fonte
0

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.

Bojangles
fonte
0

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.

velop
fonte
Essa é uma solução muito complicada. Não posso deixar de sentir que isso também custaria um pouco mais de desempenho e tempo de carregamento percebido, dependendo do peso do restante do JS na página.
Emmett R.