Comment dessiner une ligne pointillée avec CSS?

98

Comment puis-je dessiner une ligne pointillée avec CSS?

html css Kaveh
la source

Réponses:

131

Par exemple:

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

Voir aussi Styliser <hr>avec CSS .

Sinan Ünür
la source
3
Comme IE 6 (je ne me souviens pas pour IE7) ne comprendra pas le style "pointillé", vous pouvez lui dire d'utiliser "pointillé" à la place, en utilisant bien sûr des commentaires conditionnels pour viser IE6 et aucun autre navigateur.
FelipeAls
hauteur: 0px; fonctionne sur Chrome car les bordures sont séparées de la hauteur.
Ben
Vous devez comprendre que les lignes pointillées et pointillées peuvent être différentes dans de nombreux navigateurs. C'est plus lié aux lignes pointillées.
Rantiev
18 
<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />
rahul
la source
16

Utilisation du HTML:

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

et dans styles.css:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
}
Brendan Long
la source
13

La réponse acceptée a beaucoup de cruauté qui n'est plus nécessaire pour les navigateurs modernes. J'ai personnellement testé le CSS suivant sur tous les navigateurs depuis IE8, et cela fonctionne parfaitement.

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

border: nonedoit venir en premier, pour supprimer tous les styles de bordure par défaut que les navigateurs appliquent aux hrbalises.

coredumperror
la source
7

cette ligne devrait fonctionner pour vous:

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

la source
4 
.myclass {
    border-bottom: thin red dotted;
}
Graeme Perrow
la source
C'est une ligne pointillée et non pointillée.
rahul
Fixé. Je mélangeais pointillé et pointillé. De plus, ma réponse vous aurait donné une frontière entière plutôt qu'une seule ligne.
Graeme Perrow
3

J'ai essayé toutes les solutions ici et aucune n'a donné une ligne 1px propre. Pour y parvenir, procédez comme suit:

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

Alternativement:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
la source
3

utiliser comme ceci:

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

la source
3

Pour ce faire, vous devez simplement ajouter un border-topou border-bottomà votre <hr/>balise comme suit:

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

avec n'importe quel type de ligne ou couleur que vous voulez


la source
3

Ajoutez l'attribut suivant à l'élément que vous souhaitez avoir en pointillé.

style="border-bottom: 1px dotted #ff0000;"
Sarfraz
la source
2

En utilisant hrcréé deux lignes pour moi, une solide et une en pointillé.

J'ai trouvé que cela fonctionnait assez bien:

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

De plus, comme vous pouvez faire de la largeur un pourcentage, il y aura toujours de l'espace de chaque côté (même lorsque vous redimensionnez la fenêtre).

Lachlanjc
la source
1

Essayez en pointillé ... 

<hr style="border-top: 2px dashed black;color:transparent;"/>
Vibhaas Srivastava
la source
1

Dooted ligne après élément:

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
la source