border-right-width

CSSborder-right-width プロパティは、要素の右側の境界の幅を設定します。

構文

/* キーワード値 */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/* <length> 値 */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

/* グローバル値 */
border-right-width: inherit;
border-right-width: initial;
border-right-width: unset;

<line-width>
明示的な負の値ではない <length> またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
thin
 
細い境界線
medium
 
中くらいの境界線
thick
 
太い境界線

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

形式文法

<line-width>

where
<line-width> = <length> | thin | medium | thick

HTML

<div>Element 1</div>
<div>Element 2</div>

CSS

div { 
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}

結果

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-right-width の定義
勧告候補 目立った変更はなし。
CSS Level 2 (Revision 1)
border-right-width の定義
勧告 目立った変更はなし。
CSS Level 1
border-right-width の定義
勧告 初回定義
初期値medium
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
メディア視覚
計算値絶対的な長さ、または border-right-stylenone または hidden の場合は 0
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-right-widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 2.3Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報