サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
borderに色の指定(border-color)
ボックスのborderの色は、border-colorプロパティを指定します。
プロパティ名 | 値 | 説明 |
---|---|---|
border-color: | ; | 16進数RGB値(例・・#fff000)
または カラーネーム(例・・red)を指定します。 |
border--color: | ; | 16進数RGB値(例・・#fff000)
または カラーネーム(例・・red)を指定します。 |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
border-color: | #ffcccc; | 上下左右の
色を指定します。 |
border-color: | #ffcccc #ccff99; | 上下・左右の
色を指定します。 |
border-color: | #ffcccc #ccff99 #ffcccc; | 上・左右・下の
色を指定します。 |
border-color: | #ffcccc #ccff99 #ffcccc #ccff99; | 上・右・下・左の
色を指定します。 |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
border-top-color : | #ffcccc; | 上の境界線の色を指定します。 |
border-right-color: | #ffcccc; | 右の境界線の色を指定します。 |
border-bottom-color: | #ffcccc; | 下の境界線の色を指定します。 |
border-left-color: | #ffcccc; | 左の境界線の色を指定します。 |
サンプル
[headの中]
<style type="text/css"><!--
.sample{
border-width: 5px;
border-style :solid;
border-color: #ccff99;
}
h3,h4{
border-width: 5px; border-style: dotted;
}
.sample3{
border-color: #ccff99;
width: 450px;
}
.sample4{
border-top-color: #9999dd;
border-bottom-color: #ccff99;
width: 450px;
} -->
</style>
[bodyの中]
みどりの
<span class="sample">
境界線
</span>
を指定します。
<h3 class="sample3">
みどりの境界線を指定します。
</h3>
<h4 class="sample4">
上にむらさき・下にみどりの境界線を指定します。
</h4>
[ブラウザ上]
みどりの境界線を指定します。