<h1>hrを使った場合</h1>
<section id="hr">
  <h2>六、銀河ステーション</h2>
<p> カムパネルラが、そう云ってしまうかしまわないうち、次のりんどうの花が、いっぱいに光って過ぎて行きました。
 と思ったら、もう次から次から、たくさんのきいろな底をもったりんどうの花のコップが、湧わくように、雨のように、眼の前を通り、三角標の列は、けむるように燃えるように、いよいよ光って立ったのです。
</p>
<hr>
<h2>七、北十字とプリオシン海岸</h2>
<p>
「おっかさんは、ぼくをゆるして下さるだろうか。」
 いきなり、カムパネルラが、思い切ったというように、少しどもりながら、急せきこんで云いいました。
 ジョバンニは、
(ああ、そうだ、ぼくのおっかさんは、あの遠い一つのちりのように見える橙だいだいいろの三角標のあたりにいらっしゃって、いまぼくのことを考えているんだった。)と思いながら、ぼんやりしてだまっていました。
</p>
<hr>
</section>
<br><br>
<h1>cssのborderを使った場合</h1>
<section id="border">
<h2>六、銀河ステーション</h2>
<p> カムパネルラが、そう云ってしまうかしまわないうち、次のりんどうの花が、いっぱいに光って過ぎて行きました。
 と思ったら、もう次から次から、たくさんのきいろな底をもったりんどうの花のコップが、湧わくように、雨のように、眼の前を通り、三角標の列は、けむるように燃えるように、いよいよ光って立ったのです。
</p>
<h2>七、北十字とプリオシン海岸</h2>
<p>
「おっかさんは、ぼくをゆるして下さるだろうか。」
 いきなり、カムパネルラが、思い切ったというように、少しどもりながら、急せきこんで云いいました。
 ジョバンニは、
(ああ、そうだ、ぼくのおっかさんは、あの遠い一つのちりのように見える橙だいだいいろの三角標のあたりにいらっしゃって、いまぼくのことを考えているんだった。)と思いながら、ぼんやりしてだまっていました。
</p>
 </section>

<p>宮沢賢治 銀河鉄道の夜より抜粋</p>
#hr hr{
  height:5px;
}
#hr h2{
  background:#eee;
  padding:20px;
}

#border h2{
  border-bottom:3px dotted midnightblue;
  background:lightblue;
  padding:20px;
}

#border p{
  border-bottom:1px solid #333;
  padding:20px
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.