Comment dessiner une ligne pointillée avec css?

Par exemple:

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

Voir aussi Styling

avec CSS .

En utilisant HTML:

et dans styles.css:

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

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

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

border: none doit venir en premier, pour supprimer tous les styles de bordure par défaut que les navigateurs appliquent aux balises hr .

Voulez-vous dire quelque chose comme ‘border: 1px dotted black’?

Référence w3schools.com

cette ligne devrait fonctionner pour vous:

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

J’ai essayé toutes les solutions ici et aucune n’a donné une ligne 1px propre. Pour ce faire, 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; 

utiliser comme ceci:

Pour ce faire, vous devez simplement append une border-top ou border-bottom à votre

comme suit:

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

Ajoutez l’atsortingbut suivant à l’élément que vous souhaitez avoir une ligne pointillée.

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

Utiliser hr créé deux lignes pour moi, une solide et une pointillée.

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 augmenter la largeur en pourcentage, il y aura toujours de l’espace de chaque côté (même lorsque vous redimensionnez la fenêtre).

Essayez en pointillés …

Ligne après élément:

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

HTML

 
Lorem ipsum 

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