Como desenhar uma linha pontilhada com css?

97

Como posso desenhar uma linha pontilhada com CSS?

html css

— Kaveh
fonte

131

Por exemplo:

hr {
  border:none;
  border-top:1px dotted #f00;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}

Veja também Estilo <hr>com CSS .

— Sinan Ünür
fonte

3

Como o IE 6 (não me lembro do IE7) não entenderá o estilo "pontilhado", você pode dizer a ele para usar "tracejado", usando, é claro, comentários condicionais para direcionar o IE6 e nenhum outro navegador.

— FelipeAls

altura: 0px; funciona no Chrome porque as bordas são separadas da altura.

— Ben

Você deve entender que as linhas pontilhadas podem parecer diferentes em muitos navegadores. Isso está mais relacionado a linhas tracejadas.

— Rantiev

17

<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />

— Rahul
fonte

15

Usando HTML:

<div class="horizontal_dotted_line"></div>

e em styles.css:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
}

— Brendan Long
fonte

13

A resposta aceita tem muitos problemas que não são mais necessários para os navegadores modernos. Eu testei pessoalmente o seguinte CSS em todos os navegadores, desde o IE8, e ele funciona perfeitamente.

 hr {
    border: none;
    border-top: 1px dotted black;
  }

border: nonedeve vir primeiro, para remover todo o estilo de borda padrão que os navegadores aplicam às hrtags.

— coredumperror
fonte

7

Você quer dizer algo como 'borda: preto pontilhado de 1px'?

referência w3schools.com

— ChssPly76
fonte

7

esta linha deve funcionar para você:

<hr style="border-top: 2px dotted black"/>

4

.myclass {
    border-bottom: thin red dotted;
}

— Graeme Perrow
fonte

É uma linha tracejada, não pontilhada.

— rahul

Fixo. Eu estava misturando pontilhados e tracejados. Além disso, minha resposta teria dado a você uma borda inteira em vez de uma única linha.

— Graeme Perrow

3

Tentei todas as soluções aqui e nenhuma deu uma linha limpa de 1px. Para conseguir isso, faça o seguinte:

border: none; border-top: 1px dotted #000;

Alternativamente:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
fonte

3

use assim:

<hr style="border-bottom:dotted" />

3

Para fazer isso, você simplesmente precisa adicionar um border-topou border-bottomà sua <hr/>tag da seguinte forma:

<hr style="border-top: 2px dotted navy" />

com qualquer tipo de linha ou cor que você quiser

3

Adicione o seguinte atributo ao elemento que você deseja que tenha uma linha pontilhada.

style="border-bottom: 1px dotted #ff0000;"

— Sarfraz
fonte

2

Usando hrcriou duas linhas para mim, uma sólida e outra pontilhada.

Descobri que funcionou muito bem:

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

Além disso, como você pode definir a largura em uma porcentagem, sempre haverá algum espaço de cada lado (mesmo quando você redimensionar a janela).

— Lachlanjc
fonte

1

Tente tracejado ...

<hr style="border-top: 2px dashed black;color:transparent;"/>

— Vibhaas Srivastava
fonte

1

Linha dobrada após elemento:

http://jsfiddle.net/korigan/ubtkc17e/

HTML

<h2 class="dotted-line">Lorem ipsum</h2>

CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}

— Steven Mouret
fonte