border-right-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

border-right-widthCSS のプロパティで、要素の右側の境界の幅を設定します。

試してみましょう

構文

css
/* キーワード値 */
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: revert;
border-right-width: revert-layer;
border-right-width: unset;

<line-width>

境界の幅を、明示的な非負の <length> またはキーワードで定義します。キーワードの場合、以下の値のいずれかでなければなりません。

  • thin
  • medium
  • thick

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

公式定義

初期値medium
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値絶対的な長さ、または border-right-stylenone または hidden の場合は 0
アニメーションの種類length

形式文法

border-right-width = 
<line-width>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

境界線の太さの比較

HTML

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

CSS

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;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-right-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報