border-top-color:要素の上辺に設定したボーダー(枠線)の色を指定する
取り扱い | 限定的 |
適用可能 | 全ての要素 |
継承 | しない |
対応ブラウザ | border-top-colorの対応状況を確認する |
border-top-colorプロパティの説明
border-top-colorは、要素の上辺に設定したボーダー(枠線)の色を指定する際に使用します。このプロパティはあまりにも限定的な値を操作するものであり、実際の制作現場において使用する場面は多くありません。
ボーダーの色を上下左右まとめて指定する場合には、border-colorを使います。上辺のボーダーについて複数のパラメーターをまとめて指定する場合には、border-topを使います。
border-top-colorに与えられる値
- border-top-color: キーワード;
- [red]や[blue]などのキーワードで指定します。
- border-top-color: 値;
- 16進数などの値で指定します。
- border-top-color: transparent;
- ボーダーの色を透明にします。
border-top-colorの使用サンプル
CSS
.box_sample { padding: 5px; margin: 0 0 10px 0; } .border_1 { border-top-width: 3px; border-top-style: solid; border-top-color: red; } .border_2 { border-top-width: 3px; border-top-style: dashed; border-top-color: #0000FF; } .border_3 { border-top-width: 3px; border-top-style: dotted; border-top-color: rgb(0,255,0); }
HTML
<div class="box_sample border_1"> border-top-width: 3px;<br> border-top-style: solid;<br> border-top-color: red;<br> </div> <div class="box_sample border_2"> border-top-width: 3px;<br> border-top-style: dashed;<br> border-top-color: #0000FF;<br> </div> <div class="box_sample border_3"> border-top-width: 3px;<br> border-top-style: dotted;<br> border-top-color: rgb(0,255,0);<br> </div>
表示確認
border-top-width: 3px;
border-top-style: solid;
border-top-color: red;
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
border-top-style: dashed;
border-top-color: #0000FF;
border-top-style: dashed;
border-top-color: #0000FF;
border-top-width: 3px;
border-top-style: dotted;
border-top-color: rgb(0,255,0);
border-top-style: dotted;
border-top-color: rgb(0,255,0);
border-top-colorに関連するCSSプロパティ
外枠(ボーダー・アウトライン) | |
---|---|
border | 要素の周囲にボーダー(枠線)を付ける |
border-bottom | 要素の底辺にボーダー(枠線)を付ける |
border-bottom-color | 要素の底辺に設定したボーダー(枠線)の色を指定する |
border-bottom-left-radius | 要素の左下の角丸を指定する |
border-bottom-right-radius | 要素の右下の角丸を指定する |
border-bottom-style | 要素の底辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-bottom-width | 要素の底辺に設定したボーダー(枠線)の太さを指定する |
border-break | ボックスが分割された場合のボーダーの表示方法を指定する |
border-collapse | テーブルセルのボーダーの表示の仕方を指定する |
border-color | 要素のボーダー(枠線)の色を指定する |
border-image | 要素のボーダー(枠線)に画像を指定する |
border-image-outset | ボーダーイメージエリアを広げる |
border-image-repeat | ボーダー(枠線)に指定された画像の繰り返し方法を指定する |
border-image-slice | ボーダー(枠線)に指定された画像の使用範囲を指定する |
border-image-source | ボーダー(枠線)に使用する画像ファイルを指定する |
border-image-width | 画像ボーダーの太さを指定する |
border-left | 要素の左辺にボーダー(枠線)を付ける |
border-left-color | 要素の左辺に設定したボーダー(枠線)の色を指定する |
border-left-style | 要素の左辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-left-width | 要素の左辺に設定したボーダー(枠線)の太さを指定する |
border-length | 脚注の区切り線の長さを指定する |
border-radius | 要素の角丸についてまとめて指定する |
border-right | 要素の右辺にボーダー(枠線)を付ける |
border-right-color | 要素の右辺に設定したボーダー(枠線)の色を指定する |
border-right-style | 要素の右辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-right-width | 要素の右辺に設定したボーダー(枠線)の太さを指定する |
border-spacing | テーブルセルのボーダーの間隔を指定する |
border-style | ボーダー(枠線)の種類を指定する |
border-top | 要素の上辺にボーダー(枠線)を付ける |
border-top-color | 要素の上辺に設定したボーダー(枠線)の色を指定する |
border-top-left-radius | 要素の左上の角丸を指定する |
border-top-right-radius | 要素の右上の角丸を指定する |
border-top-style | 要素の上辺に設定したボーダー(枠線)のスタイル(種類)を指定する |
border-top-width | 要素の上辺に設定したボーダー(枠線)の太さを指定する |
border-width | ボーダー(枠線)の太さを指定する |
outline | アウトラインの表示方法をまとめて指定する |
outline-color | アウトラインの色を指定する |
outline-offset | アウトラインのオフセット値を指定する |
outline-style | アウトラインのスタイルを指定する |
outline-width | アウトラインの太さを指定する |