border-bottom: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
border-bottom は、下の境界線の太さ、色、スタイルを一括で指定するプロパティです。
a要素に対してこのプロパティを設定すると、リンクテキストの下線のスタイルを変更することができます。
- このスタイルを指定する場合は、予めデフォルトの下線を消しておきます。消し方については、リンクテキストの下線を消すをご覧ください。
a {
text-decoration: none;
border-bottom: 1px dotted;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
border-bottom |
太さ、色、スタイル | 下の境界線（太さ、色、スタイル）を指定 |
- 色の指定を省略すると、リンクの文字色が適用されます。
境界線の指定方法については、境界線の設定をひとまとめに行うをご覧ください。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
a { text-decoration: none; }
a.example1 { border-bottom: 2px dotted; }
a.example2 { border-bottom: 3px double; }
a.example3 { border-bottom: 1px dashed; }
</style>
</head>
<body>
<p><a href="index.html" class="example1">リンクカテゴリー</a></p>
<p><a href="index.html" class="example2">リンクカテゴリー</a></p>
<p><a href="index.html" class="example3">リンクカテゴリー</a></p>
</body>
</html>