border-*** は、枠線の太さ、色、種類をひとまとめに指定するプロパティです。
（*** の部分には、top、right、bottom、left が入りますが、ここでは bottom を使用します。）
a要素にこのプロパティを指定すると、リンク文字の下線を装飾することができます。
※このスタイルを指定する場合は、予め標準の下線を消しておきます。消し方については「リンク文字の下線を消す」をご覧ください。
a {
text-decoration: none;
border-bottom: 1px #0000a0 dotted;
}
| border-bottom | 下の枠線（太さ、色、スタイル）を指定します |
|---|
枠線の指定方法については、「枠線の設定をひとまとめに行う」をご覧ください。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
a { text-decoration: none; }
#example1 { border-bottom: 2px #0000ff dotted; }
#example2 { border-bottom: 3px #ff0000 double; }
#example3 { border-bottom: 1px #0000ff dashed; }
-->
</style>
</head>
<body>
<p><a href="index.html" id="example1">リンクカテゴリー</a></p>
<p><a href="index.html" id="example2">リンクカテゴリー</a></p>
<p><a href="index.html" id="example3">リンクカテゴリー</a></p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
