border-style: ***; border-***-style: ***;
border-style と border-***-style は、境界線のスタイルを指定するプロパティです。
border-style
… 上下左右の境界線のスタイルを一括で指定border-***-style
… 上下左右の境界線のスタイルを個別に指定 (*** の部分には、top、right、bottom、left が入ります)
上記のように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。
div.example1 {
border-width: thick;
border-color: #ff0000;
border-style: solid;
}
div.example2 {
border-width: medium;
border-color: #ff0000;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}
【境界線のスタイル】
境界線のスタイルは、以下の値で指定します。
none (線なし) (初期値)
solid (実線)
double (二重の線)
groove (谷型の線)
ridge (山型の線)
inset (凹型の線)
outset (凸型の線)
dotted (点線)
dashed (破線)
border-style … 上下左右を一括で指定
プロパティ名 | 値 | 説明 |
---|---|---|
border-style | 境界線のスタイル | 上下左右の境界線のスタイルを指定 |
【指定方法】
次のように、4タイプの指定方法があります。それぞれの値は、半角スペースで区切って記述します。
border-style: solid;
… [上下左右] を指定border-style: dashed double;
… [上下] と [左右] を指定border-style: dashed double dotted;
… [上] と [左右] と [下] を指定border-style: solid dashed double dotted;
… [上] と [右] と [下] と [左] を指定
border-***-style … 上下左右を個別に指定
プロパティ名 | 値 | 説明 |
---|---|---|
border-top-style | 境界線のスタイル | 上の境界線のスタイルを指定 |
border-right-style | 境界線のスタイル | 右の境界線のスタイルを指定 |
border-bottom-style | 境界線のスタイル | 下の境界線のスタイルを指定 |
border-left-style | 境界線のスタイル | 左の境界線のスタイルを指定 |
初期値が none(線なし)であることに注意してください。
使用例
<!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">
h1, h2, span {
border-width: medium;
border-color: #000000;
}
h1 {
border-style: dotted;
}
h2 {
border-top-style: dotted;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: groove;
}
span {
border-style: dotted none;
}
</style>
</head>
<body>
<h1>点線タイプの境界線</h1>
<h2>上下左右に異なるスタイルを指定</h2>
<p>上下の<span>境界線</span>のみ表示します。</p>
</body>
表示例
点線タイプの境界線
上下左右に異なるスタイルを指定
上下の境界線のみ表示します。
- サイト内検索