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

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

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 .

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

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

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.

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

Referencia de w3schools.com

esta línea debería funcionar para usted:

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

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

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;

usar así:

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

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

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

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

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

Trate de guiones ...

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

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