border-top
CSSでは、ボックス上に枠線を表示して、色や太さを指定することができます。
本ページでは、border-topプロパティについて説明します。
border-topプロパティとは
border-topプロパティを使うと、ボックス上側の枠線(境界線)を表示して、色や太さを指定することができます。
border-topは、border-top-widthと、border-top-style、border-top-colorを一括して設定できます。
border-topの定義は、以下のとおりです。
値 | line-width || line-style || CSSで指定できる色 |
---|---|
初期値 | medium none colorプロパティの値 |
適用対象 | すべての要素 |
継承 | しない |
値の説明
以下は、border-topで使える値と説明です。
- line-width
- 境界線の太さです。使える値は、border-top-widthと同じです。
- line-style
- 境界線の種類です。使える値は、border-top-styleと同じです。
- CSSで指定できる色
- 境界線の色です。使える値は、border-top-colorと同じです。
これらの値は、3つとも必須という訳ではなく、1つや2つだけ指定することも可能です。指定する順序も決まっていません。
省略した値は、初期値が使われます。
利用例
border-topの利用例は、以下のとおりです。
【border-topの利用例】
.test { border-top: 2px solid red; }
上記は、以下のように表示されます。
段落の上に、境界線が2pxの太さで赤色で表示されています。
以下は、2つだけ指定した例です。
【border-topで2つだけ指定した例】
.test { border-top: dotted red; }
上記であれば、境界線はデフォルトのmedium(普通は3px)の太さで、点線の赤色で表示されます。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
border-top | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
border-top | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
「CSSプロパティ一覧」に戻る