html - texto - Cómo dibujar una línea punteada con css?

linea punteada html

Question

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

Answer 1

¿Te refieres a algo así como ''borde: 1px punteado negro''?

Referencia de w3schools.com

Answer 2

Agregue el siguiente atributo al elemento que desea que tenga línea punteada.

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

Answer 3

Dooted line after element:

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

Answer 4

La respuesta aceptada tiene muchos errores que ya no son necesarios 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: none debe ser lo primero, para eliminar todo el estilo de borde predeterminado que los navegadores aplican a las etiquetas hr .

Answer 5

Para hacer esto, simplemente necesita agregar un border-top o border-bottom a su etiqueta <hr/> la siguiente manera:

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

con cualquier tipo de línea o color que desee

Answer 6

Por ejemplo:

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

Ver también Styling <hr> con CSS .

Answer 7

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;

Answer 8

Prueba discontinuo ...

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

Answer 9

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

Answer 10

Usar hr creó dos líneas para mí, una sólida y otra con puntos.

Descubrí que esto funcionó bastante bien:

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

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

Answer 11

esta línea debería funcionar para usted:

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

Answer 12

usar de esta manera:

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

Answer 13

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

Answer 14

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