CSSで点線を描く方法は？

CSSで点線を描画するにはどうすればよいですか？

例えば：

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

CSSを使用したスタイル設定<hr>もご覧ください。

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

HTMLの使用：

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

そしてstyles.cssで：

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

受け入れられた回答には、最新のブラウザでは必要とされない多くの問題があります。私は個人的に、IE8までのすべてのブラウザーで次のCSSをテストしましたが、完全に動作します。

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

border: noneブラウザがhrタグに適用するすべてのデフォルトの境界線スタイルを削除するには、最初に来る必要があります。

「border：1px doted black」のような意味ですか？

w3schools.comリファレンス

この行はあなたのために働くはずです：

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

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

私はここですべての解決策を試しましたが、どれもきれいな1px行を与えませんでした。これを行うには、以下を実行します。

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

または：

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

このように使用します：

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

これを行うには、次のようにタグにborder-topまたはborder-bottomを追加するだけです<hr/>。

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

好きな線種や色で

点線にしたい要素に以下の属性を追加します。

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

hr作成された2つの線を使用して、1つは実線、もう1つは点線です。

これは非常にうまく機能することがわかりました：

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

加えて、幅をパーセンテージにすることができるため、（ウィンドウのサイズを変更した場合でも）常に両側にある程度のスペースがあります。

ダッシュしてみてください...

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

要素の後の点線：

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