Comment dessiner une ligne pointillée avec CSS?

98

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

html css

— Kaveh
source

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

7

Voulez-vous dire quelque chose comme «bordure: 1px pointillé noir»?

Référence w3schools.com

— ChssPly76
source

7

cette ligne devrait fonctionner pour vous:

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

4

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

— Graeme Perrow
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;

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
source

3

utiliser comme ceci:

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

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

3

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

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

— Sarfraz
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
source

1

Essayez en pointillé ...

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

— Vibhaas Srivastava
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
source