サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
borderの種類(border-style)
- borderの種類はborder-styleプロパティを指定します。
- [使い方]
- .sample{border-style: dotted;}
border-style : | 上下左右をまとめて指定します。 | |
---|---|---|
border-style: |
この部分には↓のいずれかを指定します。 top right bottom left | -width: |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
border-style: | dotted; | 上下左右
の
種類の指定を指定します。 |
border-style: | dotted solid; | 上下・左右の
種類を指定します。 |
border-style: | dotted solid dashed; | 上・左右・下の
種類を指定します。 |
border-style: | dotted solid dashed double; | 上・右・下・左の
種類を指定します。 |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
border-top-style: | dotted; | 上の枠線の種類を指定します。 |
border-right-style: | solid; | 右の枠線の種類を指定します。 |
border-bottom-style: | dashed; | 下の枠線の種類を指定します。 |
border-left-style: | double; | 左の枠線の種類を指定します。 |
値 | 説明 | 表示例 |
---|---|---|
solid | 普通の線 |
solid |
double | 二重の線 |
double |
dotted | ●の点線 |
dotted |
dashed | ■の点線 |
dashed |
groove | 谷型の線 |
groove |
ridge | 山型の線 |
ridge |
inset | 凹型 |
inset |
outset | 凸型 |
outset |
none | 線なし(標準値) |
none |
サンプル
[headの中]
<style type="text/css"><!--
.sample{
order-width: thin;
border-style: solid;
border-color: #ccff99;
}
h3,h4{
border-width: 10px;
border-color: #ccff99;
}
.sample1{
border-style: dotted;
width: 400px;
}
.sample2{
border-top-style: outset;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: solid;
width: 400px;
}
-->
</style>
[bodyの中]
みどりの
<span class="sam">
枠線
</span>
を指定します。
<h3 class="sample1">
dottedの枠線を指定します。
</h3>
<h4 class="sample2">
上にoutset・右にdouble・下にdashed・左のsolidの枠線を指定します。
</h4>
[ブラウザ上]
みどりの枠線を指定します。