border-width CSS プロパティとは
トピック：border-top-width、border-right-width、border-bottom-width、およびborder-left-widthという個々の境界幅プロパティを一括の宣言で設定するための簡略化されたプロパティ
プロパティ border-width
実例 コード 1
サンプル コードを試すp { border-style: solid; border-width: 5px;}
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | 全要素。 ::first-letter にも適用される |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 以下の一括指定の各プロパティとして
|
|---|
CSS Version | CSS1 ～ |
|---|
| アニメーションの種類 : | 以下の一括指定の各プロパティとして
|
|---|
| JavaScript 構文 | object.style.borderWidth="1px 5px" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | border-width: medium |thin |thick |length |initial |inherit; |
|---|
情報：border-width プロパティは1つ、2つ、3つ、4つの値を使って指定することができる- 値が1つ指定された場合、全4辺に同じ幅が適用される。
- 値が2つ指定された場合、1つ目の幅は上下、2つ目は左右の辺に適用される。
- 値が3つ指定された場合 、1つ目の幅は上、2つ目は左右、3つ目は下の辺に適用される。
- 値が4つ指定された場合 、幅はそれぞれ上、右、下、左の順（時計回り）に適用される。
プロパティ値
| 値 | 説明 |
|---|
medium | 中程度の境界線を指定する これはデフォルトです |
thin | 細いボーダーを指定する |
thick | 太い枠線を指定する |
length | ボーダーの太さを定義できます。長さ単位 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
実例 コード 2
サンプル コードを試すborder-style: solid;
border-width: thin;
/* 細い境界線 */
実例 コード 3
サンプル コードを試すborder-style: solid;
border-width: medium;
/* 中位の境界線 */
実例 コード 4
サンプル コードを試すborder-style: solid;
border-width: thick;
/* 太い境界線 */
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| border-width | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯4 | フルサポート◯3.5 | フルサポート◯1 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| border-width | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯2 | 不明 | フルサポート◯あり | フルサポート◯4 | フルサポート◯11 | フルサポート◯3 | 不明 |
|---|
CSS border-width | CSS プロパティ 値| 意味 使い方 実例 – WebRef