¿Cómo dibujar una línea de puntos con CSS?

97

¿Cómo puedo dibujar una línea de puntos con CSS?

html css

— Kaveh
fuente

131

Por ejemplo:

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

Consulte también Estilo <hr>con CSS .

— Sinan Ünür
fuente

3

Como IE 6 (no puedo recordar para IE7) no entenderá el estilo "punteado", puede decirle que use "guiones" en su lugar, usando por supuesto comentarios condicionales para apuntar a IE6 y ningún otro navegador.

— FelipeAls

altura: 0px; funciona en Chrome porque los bordes están separados de la altura.

— Ben

Debe comprender que las líneas punteadas y discontinuas pueden verse diferentes en muchos navegadores. Eso está más relacionado con las líneas discontinuas.

— Rantiev

17

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

— rahul
fuente

15

Usando HTML:

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

y en styles.css:

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

— Brendan Long
fuente

13

La respuesta aceptada tiene una gran cantidad de cruft que ya no es necesaria para los navegadores modernos. He probado personalmente el siguiente CSS en todos los navegadores desde IE8 y funciona perfectamente.

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

border: nonedebe ser lo primero, para eliminar todo el estilo de borde predeterminado que los navegadores aplican a las hretiquetas.

— coredumperror
fuente

7

¿Quieres decir algo como 'borde: 1px punteado negro'?

Referencia de w3schools.com

— ChssPly76
fuente

7

esta línea debería funcionar para usted:

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

4

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

— Graeme Perrow
fuente

Es una línea discontinua, no punteada.

— rahul

Fijo. Estaba mezclando puntos y rayas. Además, mi respuesta le habría dado un borde completo en lugar de una sola línea.

— Graeme Perrow

3

Probé todas las soluciones aquí y ninguna dio una línea limpia de 1px. Para lograr esto, haga lo siguiente:

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

Alternativamente:

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

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
fuente

3

usar así:

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

3

Para hacer esto, simplemente necesita agregar un border-topo border-bottoma su <hr/>etiqueta de la siguiente manera:

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

con cualquier tipo de línea o color que desee

3

Agregue el siguiente atributo al elemento que desea que tenga la línea de puntos.

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

— Sarfraz
fuente

2

El uso hrcreó dos líneas para mí, una sólida y otra de puntos.

Descubrí que esto funcionó bastante bien:

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

Además, debido a que puede hacer que el ancho sea un porcentaje, siempre tendrá algo de espacio a cada lado (incluso cuando cambie el tamaño de la ventana).

— lachlanjc
fuente

1

Trate de guiones ...

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

— Vibhaas Srivastava
fuente

1

Línea tras elemento marcada:

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
fuente