CSS ボーダーおよびボックス装飾モジュールレベル 4

1. はじめに

このモジュールのプロパティは、ボーダーエリアの装飾を扱います。また、ボックスに適用できる装飾も定義します。

1.1. モジュールの相互作用

この仕様は、CSS 背景およびボーダーモジュールレベル 3 [CSS3BG] のボーダーやボックス装飾に関する部分を拡張します。

追加された corner-*-shape および border-shape プロパティ、border-*-radius、 box-shadow-* ロングハンドの論理省略形や、 border-limit および border-*-clip プロパティによる部分的ボーダーの仕様を提供します。

このモジュールのすべてのプロパティは ::first-letter 疑似要素に適用されます。 border-radius プロパティも ::first-line 疑似要素に適用されます。 UAは（必須ではありませんが） border-image や box-shadow プロパティを ::first-line に適用する場合があります。 UAは border-color/style/width プロパティを ::first-line に適用してはなりません。[CSS2]

1.2. 値の定義

この仕様は CSSプロパティ定義の規約（[CSS2]）および値定義構文（[CSS-VALUES-3]）に従います。この仕様で定義されていない値型は CSS Values & Units [CSS-VALUES-3] で定義されています。他のCSSモジュールとの組み合わせで、これらの値型の定義が拡張される場合があります。例として、CSS Imagesと組み合わせることでCSSグラデーションをbackground-imageやborder-imageの値として利用できます。 [CSS-IMAGES-3]

各プロパティ定義に記載された固有の値に加えて、この仕様で定義された全てのプロパティは CSS全域キーワードもプロパティ値として受け付けます。可読性のため、これらは明示的に繰り返していません。

2. ボーダー

ボーダーは、あらかじめ定義されたスタイル（実線、二重線、点線、疑似3Dボーダーなど）または画像にすることができます。前者の場合、様々なプロパティによってスタイル（border-style）、色（border-color）、太さ（border-width）が定義されます。

テスト

Backgrounds 3 からまだ取り込まれていない機能のテスト

2.1. 線の色：border-colorプロパティ

名前:	border-top-color, border-right-color, border-bottom-color, border-left-color, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
値:	<color> \| <image-1D>
初期値:	currentcolor
適用対象:	全ての要素。ただしルビ・ベースコンテナおよびルビ注釈コンテナを除く
継承:	no
パーセンテージ:	N/A
計算値:	計算された色および／または一次元画像関数
正準順序:	文法による
アニメーション型:	本文参照
論理プロパティグループ:	border-color

これらのプロパティは、ボーダーの前景色をborder-styleプロパティで指定します。

<image-1D> で定義されるストライプは、そのサイドのボーダー形状に沿って描かれ、パディングエッジから外側に向かって帯として描画されます。各ポイントでのボーダー幅が、そのポイントでのストライプの全体幅を定義します。

各辺ごとに複数色を指定する例:

.foo {
  border: 30px solid;
  border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
}

サンプルレンダリング：

A box with a border that has four sides,
each side having two colors in stripes.
The top border is dodger blue and sky blue,
the right border is yellow and gold,
the bottom border is light green and lime green,
and the left border is indian red and orange.

同じボーダーカラーで border-style: dotted:

名前:	border-color
値:	[ <color> \| <image-1D> ]{1,4}
初期値:	個別プロパティ参照
適用対象:	個別プロパティ参照
継承:	個別プロパティ参照
パーセンテージ:	個別プロパティ参照
計算値:	個別プロパティ参照
アニメーション型:	個別プロパティ参照
正準順序:	文法による

border-color は４つの物理的な border-*-color プロパティに対する省略プロパティです。 4つの値はそれぞれ上・右・下・左のボーダーを設定します。左が省略された場合は右、下が省略された場合は上、右が省略された場合も上と同じ値とみなされます。これはリストごとに個別に解釈されます。

フロー相対プロパティである border-block-start-color、 border-block-end-color、 border-inline-start-color、 border-inline-end-colorは、物理的な border-top-color、 border-bottom-color、 border-left-color、 border-right-colorに対応します。この対応関係は要素のwriting-mode、direction、text-orientationの設定に依存します。

名前:	border-block-color, border-inline-color
値:	<'border-top-color'>{1,2}
初期値:	個別プロパティ参照
適用対象:	個別プロパティ参照
継承:	個別プロパティ参照
パーセンテージ:	個別プロパティ参照
計算値:	個別プロパティ参照
アニメーション型:	個別プロパティ参照
正準順序:	文法による

これら2つの省略プロパティは、border-block-start-colorとborder-block-end-color、 border-inline-start-colorとborder-inline-end-colorをそれぞれ設定します。最初の値がstartサイドの色、 2つ目の値がendサイドの色を表します。 1つのみ値を指定した場合、 start側とend側の両方に適用されます。

テスト

2.2. 線のパターン: the border-style プロパティ

Name:	border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
Value:	<line-style>
Initial:	none
Applies to:	全ての要素。ただし ruby base containers と ruby annotation containers を除く
Inherited:	no
Percentages:	N/A
Computed value:	指定されたキーワード
Canonical order:	文法に従う
Animation type:	discrete
Logical property group:	border-style

これらのプロパティは、ボーダーが表示されるかどうか、表示される場合にどのようなスタイルで描画されるかを制御します（border imageで上書きされない場合）。

フロー相対のプロパティである flow-relative な border-block-start-style、border-block-end-style、border-inline-start-style、および border-inline-end-style は、物理的なプロパティである physical な border-top-style、border-bottom-style、border-left-style、および border-right-style に対応します。この対応は要素の writing-mode、direction、および text-orientation に依存します。

Name:	border-block-style, border-inline-style
Value:	<'border-top-style'>{1,2}
Initial:	個別プロパティ参照
Applies to:	個別プロパティ参照
Inherited:	個別プロパティ参照
Percentages:	個別プロパティ参照
Computed value:	個別プロパティ参照
Animation type:	個別プロパティ参照
Canonical order:	文法に従う

これら2つの省略プロパティは、それぞれ border-block-start-style & border-block-end-style と border-inline-start-style & border-inline-end-style を設定します。最初の値は start 側のスタイルを表し、 2番目の値は end 側のスタイルを表します。 1つしか値が与えられない場合は、start 側と end 側の両方に適用されます。

Name:	border-style
Value:	<'border-top-style'>{1,4}
Initial:	個別プロパティ参照
Applies to:	個別プロパティ参照
Inherited:	個別プロパティ参照
Percentages:	個別プロパティ参照
Computed value:	個別プロパティ参照
Animation type:	個別プロパティ参照
Canonical order:	文法に従う

border-style は四つの物理的な border-*-style プロパティに対する省略プロパティです。 4つの値はそれぞれ上、右、下、左のボーダーのスタイルを設定します。左が省略された場合は右と同じ、下が省略された場合は上と同じ、右が省略された場合も上と同じとみなされます。これは各リスト項目ごとに個別に解決されます。

スタイルは <line-style> キーワードで指定され、内容は次のとおりです。

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

各値の意味は次のとおりです：

none: ボーダー無し。色と太さは無視されます（つまり、ボーダーの幅は 0 になります）。これは border-image-width の初期値もゼロに解決されることを意味します。
hidden: none と同じですが、ボーダー折りたたみ（border-collapsed）テーブルにおけるボーダー競合解決ルールで異なる振る舞いをします。[CSS2]
dotted: 一連の丸い点。
dashed: 四角端のダッシュ（破線）の連続。
solid: 単一の線分。
double: 二本の平行な実線が間隔をあけて並ぶ。（線の太さは指定されませんが、線と間隔の合計が border-width と等しくなる必要があります。）
groove: キャンバスに刻まれているかのように見える。（通常は指定された border-color よりわずかに明るい色と暗い色の二色で「影」を作ることで実現されます。）
ridge: キャンバスから浮き出ているかのように見える。
inset: ボーダーの内側の内容がキャンバスに窪んでいるかのように見える。折りたたみ境界モデルでは ridge として扱われます。[CSS2]
outset: ボーダーの内側の内容がキャンバスから持ち上がっているかのように見える。折りたたみ境界モデルでは groove として扱われます。[CSS2]

ボーダーは要素の背景の前面に描かれますが、要素の内容（重なった場合）の背後に描かれます。

Note: groove、ridge、inset、outset のような「3D」効果を作るためには、黒や白に近い色は中間の色と異なる色計算を必要とする場合があります。

Note: 点やダッシュの間隔やダッシュの長さを制御する手段はありません。実装は角が対称になるような間隔を選択することが推奨されます。

Tests

2.3. 線の太さ: the border-width プロパティ

Name:	border-top-width, border-right-width, border-bottom-width, border-left-width, border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
Value:	<line-width>
Initial:	medium
Applies to:	全ての要素。ただし ruby base containers と ruby annotation containers を除く
Inherited:	no
Percentages:	N/A
Computed value:	絶対長さ、境界幅としてのスナップ（snapped as a border width）；ボーダースタイルが none または hidden の場合はゼロ
Canonical order:	文法に従う
Animation type:	計算値による
Logical property group:	border-width

これらのプロパティは、ボーダー、すなわちボーダー幅の太さを指定します。ここで

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

負の値は無効です。 thin、medium、および thick キーワードは、それぞれ 1px、3px、および 5px に相当します。

フロー相対のプロパティである flow-relative な border-block-start-width、border-block-end-width、border-inline-start-width、および border-inline-end-width は、物理的なプロパティである physical な border-top-width、border-bottom-width、border-left-width、および border-right-width に対応します。この対応は要素の writing-mode、direction、および text-orientation に依存します。

Name:	border-block-width, border-inline-width
Value:	<'border-top-width'>{1,2}
Initial:	個別プロパティ参照
Applies to:	個別プロパティ参照
Inherited:	個別プロパティ参照
Percentages:	個別プロパティ参照
Computed value:	個別プロパティ参照
Animation type:	個別プロパティ参照
Canonical order:	文法に従う

これら2つの省略プロパティは、それぞれ border-block-start-width & border-block-end-width と border-inline-start-width & border-inline-end-width を設定します。最初の値は start 側の幅を表し、 2番目の値は end 側の幅を表します。 1つのみ値が与えられた場合は、start 側と end 側の両方に適用されます。

Name:	border-width
Value:	<'border-top-width'>{1,4}
Initial:	個別プロパティ参照
Applies to:	個別プロパティ参照
Inherited:	個別プロパティ参照
Percentages:	個別プロパティ参照
Computed value:	個別プロパティ参照
Animation type:	個別プロパティ参照
Canonical order:	文法に従う

border-width は四つの物理的な border-*-width プロパティに対する省略プロパティです。 4つの値はそれぞれ上、右、下、左のボーダー幅を設定します。左が省略された場合は右と同じ、下が省略された場合は上と同じ、右が省略された場合も上と同じとみなされます。これは各リスト項目ごとに個別に解決されます。

Note: 初期の幅は initial では medium ですが、初期のスタイルは none のため、使用される初期幅（used initial width）は 0 になります。

Tests

2.4. ボーダー省略プロパティ

名前:	border-top, border-right, border-bottom, border-left, border-block-start, border-block-end, border-inline-start, border-inline-end
値:	<line-width> \|\| <line-style> \|\| <color>
初期値:	個別プロパティ参照
適用対象:	全ての要素。ただしルビ・ベースコンテナおよびルビ注釈コンテナを除く
継承:	no
パーセンテージ:	N/A
計算値:	個別プロパティ参照
アニメーション型:	個別プロパティ参照
正準順序:	文法に従う

これらの省略プロパティは、ボックスのborder-width、border-color、border-styleの1辺分を設定します。省略された値は初期値になります。

フロー相対プロパティであるborder-block-start、border-block-end、border-inline-start、およびborder-inline-endは、物理的な border-top、border-bottom、border-left、 border-right に対応します。この対応は、要素のwriting-mode、direction、text-orientationにより決まります。

名前:	border-block, border-inline
値:	<'border-block-start'>
初期値:	個別プロパティ参照
適用対象:	個別プロパティ参照
継承:	個別プロパティ参照
パーセンテージ:	個別プロパティ参照
計算値:	個別プロパティ参照
アニメーション型:	個別プロパティ参照
正準順序:	文法に従う

これら2つの省略プロパティは、border-block-start & border-block-endまたはborder-inline-start & border-inline-endを同じスタイルで両方同時に設定します。

名前:	border
値:	<line-width> \|\| <line-style> \|\| <color>
初期値:	個別プロパティ参照
適用対象:	個別プロパティ参照
継承:	個別プロパティ参照
パーセンテージ:	個別プロパティ参照
計算値:	個別プロパティ参照
アニメーション型:	個別プロパティ参照
正準順序:	文法に従う

テスト

borderプロパティは、ボックスのすべてのボーダーのborder-width、border-color、border-styleを同時に設定する省略プロパティです。 marginや paddingプロパティなどの省略指定と異なり、 borderプロパティでは4辺それぞれに異なる値を指定できません。これを行うには他のボーダープロパティを使用する必要があります。

border省略指定はborder-imageも初期値にリセットします。そのため、著者はborder省略指定で先に設定されたボーダーの情報を上書きしたいとき、他の省略指定や個別プロパティよりも積極的に使うことが推奨されます。こうすることで新しいスタイルが正しく効くようにborder-imageもリセットされることが保証されます。

Note: CSSワーキンググループは将来的にborder省略指定で全てのボーダープロパティをリセットする方針です。例えば今後border-charactersプロパティが導入され、文字グリフをボーダー装飾にできるようになった場合、それもborder省略指定でリセットされます。 border省略指定を使っておけば、将来どんなプロパティが追加されても常に「真っさらな状態」に戻せることが保証されます。

例えば、下記の最初のルールは後に示す5つのルールと等価です:

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

プロパティが機能的に重複部分を持つため、ルールを指定する順序は重要です。

この例を考えます:

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

上記の例では、左側のボーダーの色は黒、他のボーダーは赤になります。これはborder-leftプロパティが太さ・スタイル・色すべてを設定するためです。 border-leftプロパティに色が指定されていなければ、 color プロパティの値が使われます。 colorプロパティが border-leftプロパティの後なのは関係ありません。

3. 角

パディングエッジ（内側のボーダー）の半径は、外側のボーダーの半径から対応するボーダーの太さを引いた値です。これにより負の値になった場合、内側の半径はゼロになります。（この場合、ボーダーの内側曲線の中心は、外側曲線の中心と一致しないことがあります。）同様に、コンテンツエッジの半径はパディングエッジの半径から対応するパディングを引いた値で、それが負の場合はゼロになります。曲線部分におけるボーダーとパディングの太さは隣接辺から補間され、隣り合うボーダーの太さが異なる場合は、太いボーダーから細いボーダーへの滑らかな遷移が角に現れます。

全てのボーダースタイル（solid、dotted、inset など）はボーダーの曲線に従います。

異なる太さの2つのボーダーをつなぐ丸みを帯びた角の効果（左）と、角の半径より太いボーダーに丸みを付けた効果（右）。

Note: 角の外側曲線の中心が反対側のパディングエッジ（角の反対側のボーダーエリア）を超える場合、内側の曲線は完全な4分の1楕円にはなりません。

The curved corner is an arc from the top left corner
sweeping across the top right corner to the bottom right corner,
describing a quarter-ellipse;
but since the opposite sides have a border thickness
the padding edge curve starts inward from the outer arc's endpoints. — border-radius の曲線が反対側のボーダーにはみ出す場合、パディングエッジの弧は 90°未満になります。

マージンエッジは、ボーダーエッジの外側にあり、対応するマージンの厚さを各ボーダー半径に加えることで半径を計算し、アウトセット調整済みボーダー半径を適用します。

エッジがボーダー半径を持つ場合、例えばマージンエッジ、box-shadowの拡張やoverflow-clip-marginの計算において、小さな丸みの角に大きなアウトセットが加わると極端に丸くならないよう、ボーダー半径の値は調整されます。

これは該当するアウトセット調整済ボーダー半径を計算して行います。

2次元のエッジの半径とアウトセットを与えられたときのアウトセット調整済ボーダー半径の計算方法：

coverage を 2 * min(radius の width / edge の width, radius の height / edge の height) とする。
adustedRadiusWidth を、coverage、radius の adjusted radius dimension、radius の width、および outset の width を与えたときの値とする。
adustedRadiusHeight を、coverage、radius の adjusted radius dimension、radius の height、および outset の height を与えたときの値とする。
(adustedRadiusWidth, adustedRadiusHeight) を返す。

数値coverage、radius、outsetが与えられたときの調整済み半径寸法の計算方法：

もしradiusがspreadより大きい場合、またはcoverageが1より大きい場合、radius + outsetを返す。
ratioをradius / outsetとする。
radius + outset * (1 - (1 - ratio)³ * (1 - coverage³)) を返す。

Note: このアルゴリズムはoutset（または spread）が角の形状に与える効果を減らすためのものです。 coverage係数は、矩形状（ボーダー半径が0に近い場合）ほど影響が大きくなり、楕円状（ボーダー半径が50%に近い場合）は影響が小さくなります。

3.1. 角のクリッピング

border imagesはborder-radiusの影響を受けませんが、その他の描画やイベント処理のクリッピングはボーダー、パディング、コンテンツエッジそれぞれの曲線でクリップしなければなりません。例として、背景はbackground-clipで指定した曲線で、 overflowがvisible以外の時は曲線のパディングエッジで（両軸がoverflowでvisible でなければ）、replaced elementの内容は曲線のコンテンツエッジ、ポインターイベントは曲線のボーダーエッジでクリップします。

Note: border-radiusは要素のインタラクティブ領域を減少させるため、著者はターゲットとするプラットフォームの推奨最小インタラクティブ領域を満たすことを確認するべきです。特に、border-radiusを使う場合、推奨タッチターゲットサイズを満たすには幅や高さを十分大きくする必要があるかもしれません。

この例では内容が角からはみ出さないよう適切なパディングを付与します。ボーダーがなくても、背景は角が丸くなります。

DIV {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em }

3.2. 色・スタイルの遷移

色やスタイルの遷移は、両方のボーダー半径および内側曲線の中心を含む最小矩形と交差するボーダーのセグメント内に収めなければなりません（ボーダー半径がborder widthよりも小さい場合は、その点はパディングエッジの角を表します）。

このどちらかのボーダーが幅ゼロの場合は、他方のボーダーが遷移領域をすべて占有します。それ以外の場合、隣り合うボーダー間の色・スタイルの遷移の中心は曲線上の一点であり、これはボーダー幅の比率に関する連続的かつ単調増加な関数です。ただし、この遷移がどのような見た目になるか、またどんな関数で曲線上の点に写像されるかは定義されません。

これらの角の形状において、色やスタイルの遷移は緑の領域内で行われなければなりません。 Dのケースでは、ボーダー半径で定義される矩形が内側曲線の中心（鋭角）を含まないため、遷移領域はその角を含むよう拡張されます。遷移は遷移領域全体を使うこともできますが、必須ではありません。たとえば、二つのsolidボーダースタイル間のグラデーション遷移は、外側半径の端と内側半径の端で囲まれる領域（Dの場合暗い緑色の領域）のみを使うこともあります。

Tests

border-radius-currentcolor.html (live test) (source)

3.3. 重複曲線

角の曲線は重なってはなりません。任意の隣接ボーダー半径の合計がボーダーボックスのサイズを超える場合は、全てのボーダー半径の使用値を比例的に減少させ、オーバーラップしないようにしなければなりません。半径の縮小アルゴリズムは以下の通りです：

f = min(L_i/S_i) とし、i ∈ {top, right, bottom, left}、S_iは辺iの2つの隣接角の半径の合計、 L_top = L_bottom = ボックスの幅、 L_left = L_right = ボックスの高さとします。 f < 1 の場合、全てのコーナー半径はf倍されて縮小されます。

Note: この式により、1/4円は1/4円を保ち、大きな半径は小さな半径より大きい状態が保たれますが、すでに十分小さい角でも縮小されることがあり、見た目が揃うはずだったボーダーが異なって見えることがあります。

曲線がスクロールバーなどUI要素と干渉する場合、 UAは問題のボーダー半径のみ、必要な範囲でさらに縮小してもかまいません。

たとえば、以下の図のAのボーダーは

box-sizing: border-box;
width: 6em;
height: 2.5em;
border-radius: 0.5em 2em 0.5em 2em

高さ（2.5em）は指定半径（0.5em + 2.0em）を収容可能です。しかし、もし高さが2emなら

box-sizing: border-box;
width: 6em;
height: 2em;
border-radius: 0.5em 2em 0.5em 2em

全ての角の半径はフィットするよう0.8倍に縮小されます。したがって使用ボーダー半径は0.4em（元は0.5em）と1.6em（元は2em）になります。図のBのボーダーを参照。

rectangle with two tiny rounded corners and two very large ones, on opposite corners — これらの角丸みは、Aが`width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em`、Bが`height: 2em`で得られます。

3.4. テーブルへの効果

border-radiusプロパティは、table、inline-table、table-cellボックスのセパレートボーダーモード（border-collapse: separate）で有効です。 border-collapseがcollapseの場合は効果がありません。

Tests

ttwf-reftest-borderRadius.html (live test) (source)

3.5. 角サイズ: border---radiusプロパティ

名前:	border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
値:	<border-radius>
初期値:	0
適用対象:	全要素（本文参照）
継承:	no
パーセント値:	対応するボーダーボックスの各次元に対する割合
計算値:	計算後の<length-percentage>値のペア
正準順序:	文法による
アニメーション型:	計算値による
論理プロパティグループ:	border-radius

半径は<border-radius>値で指定されます。内容は次のとおりです：

<border-radius> = <slash-separated-border-radius-syntax> | <legacy-border-radius-syntax>
<slash-separated-border-radius-syntax> = <length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?
<legacy-border-radius-syntax> = <length-percentage [0,∞]>{1,2}

border-*-radius プロパティの 2 つの <length-percentage> の値は、外側の border edge の角の形状となる四分円の楕円の半径を定義します（下図参照）。 1 つ目の値は横方向の半径（水平半径）、2 つ目は縦方向の半径（垂直半径）です。 2 つ目の値が省略された場合は 1 つ目の値が複製されます。いずれかの長さが 0 の場合、角は丸くならず、直角（スクエア）になります。横方向の半径に対するパーセンテージは border box の幅に対し、縦方向の半径に対するパーセンテージは border box の高さに対します。負の値は無効です。

Note: 著者はスラッシュ構文（slash syntax）の使用を推奨しますが、旧来構文（空白区切り2値）も後方互換性のためサポートされています。

Diagram of the inscribed ellipse — border-top-left-radius: 55pt 25ptの2つの値が角の丸み（曲率）を定義します。

この例は幅15em高さ10emの楕円を描きます:

DIV.standout {
    width: 13em;
    height: 8em;
    border: solid black 1em;
    border-radius: 7.5em 5em }

フロー相対のborder-start-start-radius、border-start-end-radius、border-end-start-radius、 border-end-end-radiusは、物理プロパティであるborder-top-left-radius、border-bottom-left-radius、border-top-right-radius、 border-bottom-right-radiusに対応します。この対応は要素のwriting-mode、direction、text-orientationによって定まります。最初のstart/endがブロック軸サイド、２つ目がインライン軸サイド（つまり 'border-block-inline-radius' のパターン）です。

3.6. 角サイズ省略: border-radius および border-*-radius 省略プロパティ

3.6.1. 一辺の角のサイズ指定: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius の省略プロパティ

Name:	border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
Value:	<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?
Initial:	0
Applies to:	全ての要素（本文参照）
Inherited:	no
Percentages:	対応するボーダーボックスの次元を参照
Computed value:	個別プロパティ参照
Animation type:	個別プロパティ参照
Canonical order:	文法に従う

border-*-radius の省略プロパティは、関連する辺の二つの border-*-*-radius ロングハンドプロパティを設定します。スラッシュの前後に値が与えられている場合、スラッシュ前の値が水平半径を設定し、スラッシュ後の値が垂直半径を設定します。スラッシュがない場合は、値は両方の半径に同じように適用されます。半径の2つの値は、順に top-left, top-right が border-top-radius のために、 top-right, bottom-right が border-right-radius のために、 bottom-left, bottom-right が border-bottom-radius のために、 top-left, bottom-left が border-left-radius のために、 start-start, start-end が border-block-start-radius のために、 end-start, end-end が border-block-end-radius のために、 start-start, end-start が border-inline-start-radius のために、そして start-end, end-end が border-inline-end-radius のために与えられます。第二の値が省略された場合は、第一の値がコピーされます。

テスト

3.6.2. 全ての角を一度にサイズ指定: border-radius 省略プロパティ

Name:	border-radius
Value:	<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
Initial:	個別プロパティ参照
Applies to:	個別プロパティ参照
Inherited:	個別プロパティ参照
Percentages:	個別プロパティ参照
Computed value:	個別プロパティ参照
Animation type:	個別プロパティ参照
Canonical order:	文法に従う

The border-radius 省略プロパティは、4つの border-*-radius プロパティ全てを設定します。スラッシュの前後に値が与えられている場合、スラッシュ前の値は水平半径を設定し、スラッシュ後の値は垂直半径を設定します。スラッシュがない場合は、値は両軸に等しく適用されます。各半径に対する4つの値は順に top-left, top-right, bottom-right, bottom-left の順で与えられます。 bottom-left が省略された場合は top-right と同じになります。 bottom-right が省略された場合は top-left と同じになります。 top-right が省略された場合は top-left と同じになります。

border-radius: 4em;

は次と同等です

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

そして

border-radius: 2em 1em 4em / 0.5em 3em;

は次と同等です

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

3.7. 角の形状指定: corner-*-shape プロパティ

既定では、ゼロ以外の border-radius 値は、影響を受ける角を丸める 1/4 楕円である角の形状を定義し、その角の border-radius によって定義される角領域を埋めます。しかし場合によっては、他の角形状を望むことがあります。 corner-*-shape プロパティ（およびその省略形）は、ボックスが border-*-radius 値で定義する領域に対してどのような角形状を使用するかを正確に指定します。

異なる角形状はすべて、 スーパーレンジス（superellipse）の異なるパラメータとして表現できます。スーパーレンジスは楕円の一般化であり、その `k` パラメータに基づいて四角形や楕円、ノッチの間の全ての形状を表現できます。

スーパーレンジスはどのように動作しますか？

単位円は次の方程式で定義されます：

x^{2} + y^{2} = 1

その方程式を満たす点 (x,y) の集合が円を作ります。与えられた楕円は、この形状を X 軸および／または Y 軸方向にスケーリングすることで得られます。

単位スーパーレンジスの方程式は、上の ² 指数を変数に変えるだけです。この仕様では 2^K として表します：

x^{2^{K}} + y^{2^{K}} = 1

この方程式の K が superellipse() の引数になります。

K は任意の値になり得ます； K を 1 に設定すると標準の円／楕円方程式になりますが、他の値はスーパーレンジス曲線族を定義します：

1 より大きい値はより「四角」にします：伝統的な "squircle" は K = 2 を使い、 K = ∞ は完全な正方形になります。（K = 10 でもほぼ正方形に見えます。）
0 と 1 の間の値はより「平ら」にします； K = 0 のときは辺が完全に平らなひし形になります。
負の値は凹型の曲線を定義し、正の値で得られる形の概ね逆の形になります： K = -1 はほぼ楕円の「すくい」形を与え、 K = -2 は「squircle」状のすくいを与え、 K = -∞ は正方形のすくいを与えます。

（注：文献の多くはスーパーレンジスをより簡潔に $x^{K}$ の形で記述しますが、ここでは引数範囲を扱いやすくするために $x^{2^{K}}$ の形を採用しています：すべての値が有効であり、対称形状は正負で区別でき、中間の面取りは 0、などの扱いが容易になります。）

完全な表現や補間を可能にするために、 corner-shape プロパティはスーパーレンジスのパラメータを直接 superellipse() 関数で与えることができ、または一般的に使われるパラメータを表すキーワードのいずれかを使えます。詳細は <corner-shape-value> 定義を参照してください。

Tests

Name:	corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
Value:	<corner-shape-value>
Initial:	round
Applies to:	border-radius が適用できる全ての要素
Inherited:	no
Percentages:	該当なし
Computed value:	対応する superellipse() 値
Canonical order:	文法に従う
Animation type:	superellipse interpolation を参照
Logical property group:	corner-shape

corner-*-*-shape のロングハンドプロパティは、指定された角の形状を設定します。

フロー相対のロングハンド（corner-start-start-shape 等）は、要素の writing-mode、direction、および text-orientation に基づいて、物理的なロングハンド（corner-top-left-shape 等）に対応します。最初の start/end がブロック軸側を与え、 2 番目がインライン軸側を与えます（つまり corner-block-inline-shape のような並び）。

<corner-shape-value> = round | scoop | bevel | notch | square | squircle |
                       <superellipse()>
superellipse() = superellipse(<number> | infinity | -infinity)

round: 角形状は凸楕円の 1/4 です。 superellipse(1) と同等です。
Note: これは corner-shape プロパティの初期値です。これは border-radius が corner-shape の導入前に示していた挙動でした。
squircle: 角形状は「スクアイクル」（squircle）の 1/4 であり、 round と square の中間の凸曲線です。 superellipse(2) と同等です。
square: 角形状は凸の 90° 角です。 superellipse(infinity) と同等です。
Note: これは border-radius: 0 による通常の直角と同一に見えますが、他の corner-shape 値と滑らかにアニメーションできます。
bevel: 角形状は直線の対角線であり、凸でも凹でもありません。 superellipse(0) と同等です。
scoop: 角形状は凹の 1/4 楕円です。 superellipse(-1) と同等です。
notch: 角形状は凹の 90° 角です。 superellipse(-infinity) と同等です。
superellipse(K): 角形状はスーパーレンジスの 1/4 です。引数 K はスーパーレンジスパラメータであり、 2^K の指数を用いるスーパーレンジスを定義します。
スーパーレンジスの数学的定義や各 K 値の意味については § 3.7 の注を参照してください。スーパーレンジスの計算および描画の詳細については § 3.9.4 を参照してください。

右上角に対する異なる superellipse() 値：infinity、1、0、-1、および -infinity。

Note: border-radius が指定されていない（または 0 に設定されている）場合、角領域のサイズもゼロとなり、 corner-shape は効果を持ちません。

corner-*-shape は overflow ルールを直接変更しません— ただし角の形状が異なることにより影響を受ける範囲はあります；要素は通常通り形作られたボーダーでクリップされます。

corner-*-shape で指定される曲線はボーダーの外側エッジを定義します。ボーダーの内側エッジは外側エッジの曲線に従います（必ずしもスーパーレンジス曲線として表現可能ではない方法で）、外側エッジからほぼ一貫した距離を保ちながら（または、角で合流する2つのボーダーエッジの border-width が均一でない場合は線形に増加する距離で）進みます。

corner-*-shape は box-shadow の描画や、ボックスから拡張されたときの overflow clip edge の形状にも影響しますが、これらは内側ボーダーエッジのように直接 corner-*-shape パスに従うわけではありません。代わりに、corner-shape パスを軸に揃えた方法でスケールします。

3.8. 角の形状省略指定: corner-shape および corner-*-shape 省略プロパティ

3.8.1. 一辺の角の形状指定: corner-*-shape 省略指定:

名前:	corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape, corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape
値:	<'corner-top-left-shape'>{1,2}
初期値:	個別プロパティ参照
適用対象:	個別プロパティ参照
継承:	個別プロパティ参照
パーセント値:	個別プロパティ参照
計算値:	個別プロパティ参照
アニメーション型:	個別プロパティ参照
正準順序:	文法に従う

corner-*-shape の省略プロパティは、関連する辺の2つのcorner-*-*-shape プロパティを設定します。値が1つだけの場合、2つ目の値も同じ値になります。

物理プロパティの場合（corner-top-shape など）、値は left/right または top/bottom 順ですが、プロパティに意味のある軸に従います。つまり corner-top-shape: round square は corner-top-left-shape: round; corner-top-right-shape: square; を設定します。

論理省略プロパティ（corner-block-start-shape など）の場合、値は必ず他軸の start/end 順になります。つまり corner-block-start-shape: round square は corner-start-start-shape: round; corner-start-end-shape: square; を設定します。

3.8.2. 全ての角の形状指定: corner-shape 省略プロパティ

名前:	corner-shape
値:	<'corner-top-left-shape'>{1,4}
初期値:	round
適用対象:	border-radius が適用できる全要素
継承:	no
パーセント値:	個別プロパティ参照
計算値:	個別プロパティ参照
アニメーション型:	個別プロパティ参照
正準順序:	文法に従う

corner-shape プロパティは border-radius で定義される領域内でボックスの角の形状を指定します。 4つの値は順に上・右・下・左の角形状を設定します。左が省略された場合は右と同じ、下が省略された場合は上と同じ、右が省略された場合も上と同じとなります。

3.9. 角サイズ・形状省略指定: corner および corner-* 省略プロパティ

3.9.1. 角一つのサイズ・形状指定: corner-top-left, corner-top-right, corner-bottom-right, corner-bottom-left, corner-start-start, corner-start-end, corner-end-start, corner-end-end 省略プロパティ

名前:	corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right, corner-start-start, corner-start-end, corner-end-start, corner-end-end
値:	<'border-top-left-radius'> \|\| <'corner-top-left-shape'>
初期値:	0
適用対象:	全ての要素（本文参照）
継承:	no
パーセント値:	対応するボーダーボックスの次元参照
計算値:	個別プロパティ参照
正準順序:	文法に従う
アニメーション型:	個別プロパティ参照

corner-*-* 省略プロパティは、関連する辺の2つの corner-*-*-shape ロングハンドプロパティと border-*-*-radius ロングハンドプロパティを設定します。詳細は各 corner-*-*-shape および border-*-*-radius プロパティを参照してください。

3.9.2. 一辺の角サイズ・形状指定: corner-top, corner-right, corner-bottom, corner-left, corner-block-start, corner-block-end, corner-inline-start, corner-inline-end 省略プロパティ

名前:	corner-top, corner-right, corner-bottom, corner-left, corner-block-start, corner-block-end, corner-inline-start, corner-inline-end
値:	<'border-top-radius'> \|\| <'corner-top-shape'>
初期値:	0
適用対象:	全ての要素（本文参照）
継承:	no
パーセント値:	対応するボーダーボックスの次元参照
計算値:	個別プロパティ参照
正準順序:	文法に従う
アニメーション型:	個別プロパティ参照

corner-* 省略プロパティは、関連する辺の2つのcorner-*-shape ロングハンドプロパティと、2つの border-*-radius ロングハンドプロパティを設定します。詳細は各 corner-*-shape および border-*-radius プロパティを参照してください。

3.9.3. すべての角のサイズ・形状を一度に指定: corner 省略プロパティ

名前:	corner
値:	<'border-radius'> \|\| <'corner-shape'>
初期値:	0
適用対象:	全ての要素（本文参照）
継承:	no
パーセント値:	対応するborder boxの各次元を参照
計算値:	個別プロパティ参照
正準順序:	文法に従う
アニメーション型:	個別プロパティ参照

corner 省略プロパティは corner-*-shape と border-*-radius のロングハンドをまとめて設定します。

3.9.4. corner-shape のレンダリング

角付き要素をレンダリングする際、要素のパスは border、outline、box-shadow、overflow-clip-margin などに基づいてオフセットする必要があります。

ボーダーやアウトラインをレンダリングする場合、オフセットは要素形状の曲線に沿って配置されますが、box-shadowや overflow-clip-margin のオフセットの場合は軸整列になります。

Adjusting corner shapes — ボーダーは曲線合わせ、シャドウやクリップは軸合わせになる。

要素 element の外周パス（outer contour）は、 element および element の border contour path と border edge から得られます。

要素 element の内周パス（inner contour）は、 element および element の border contour path と padding edge から得られます。

要素の border は外周パスと内周パスの間に描画されます。

要素の outline は、外周パスと使用値の outline-width、outline-offset に従います。レンダリングの詳細は実装依存です。

要素の overflow エリアは内周パスで形作られます。要素の overflow clip edge は、 element、element の padding edge、使用値の overflow-clip-margin に基づく border contour path で形作られます。

要素の 'box shadow' の各シャドウは element、element の border edge、シャドウの使用値の box-shadow-spread を与えた border contour path で形作られます。

要素 element の border contour path をエッジ targetEdge と、オプションの数値 spread （デフォルト 0）で計算する手順：

outerLeft, outerTop, outerRight, outerBottom を element の unshaped border edge の spread 分外側に出したものとする。
topLeftHorizontalRadius, topLeftVericalRadius, topRightHorizontalRadius, topRightVerticalRadius, bottomRightHorizontalRadius, bottomRightVerticalRadius, bottomLeftHorizontalRadius, bottomLeftVerticalRadius を element の border edge の半径として、 element の opposite corner scale factor および outset-adjusted でスケーリングする。
topLeftShape, topRightShape, bottomRightShape, bottomLeftShape を element の計算値の corner-*-shape とする。
targetLeft, targetTop, targetRight, targetBottom は unshaped targetEdge で与えられる値とする。
path を新しいパスとする [SVG2]。
Add corner to path with path、 rectangle (outerRight - topRightHorizontalRadius, outerTop, topRightHorizontalRadius, topRightVerticalRadius), targetEdge, 0, targetTop - outerTop, outerRight - targetRight, topRightShape。
Add corner to path with path、 rectangle (outerRight - bottomRightHorizontalRadius, outerBottom - bottomRightVerticalRadius, bottomRightHorizontalRadius, bottomRightVerticalRadius), targetEdge, 1, outerRight - targetRight, outerBottom - targetBottom, bottomRightShape。
Add corner to path with path、 rectangle (outerLeft, outerBottom - bottomLeftVerticalRadius, bottomLeftHorizontalRadius, bottomLeftVerticalRadius), targetEdge, 2, outerBottom - targetBottom, targetLeft - outerLeft, bottomLeftShape。
Add corner to path with path、 rectangle (outerLeft, outerTop, topLeftHorizontalRadius, topLeftVericalRadius), targetEdge, 3, targetLeft - outerLeft, targetTop - outerTop, topLeftShape。
path を返す。

パス path、矩形 cornerRect、矩形 trimRect、数値 orientation, startThickness, endThickness, curvature が与えられたときに add corner to path 手順：

もし cornerRect が空または curvature = ∞ の場合：
1. innerQuad を trimRect の clockwise quad とする。
2. path に innerQuad[(orienation + 1) % 4] への直線を追加。
3. return。
cornerQuad を cornerRect の clockwise quad とする。
もし curvature = -∞ の場合：
1. path に cornerQuad[0] から cornerQuad[3] への直線を trimRect で切り詰めて追加。
2. path に cornerQuad[3] から cornerQuad[2] への直線を trimRect で切り詰めて追加。
3. return。
clampedNormalizedHalfCorner を normalized superellipse half corner（clamp(curvature, -1, 1) で）とする。
equivalentQuadraticControlPointX を clampedNormalizedHalfCorner * 2 - 0.5 とする。
curveStartPoint を aligned corner point（ cornerQuad[orienation]、ベクトル (equivalentQuadraticControlPointX, 1 - equivalentQuadraticControlPointX), startThickness, orientation + 1 ）で求める。
curveEndPoint を aligned corner point（ cornerQuad[(orientation + 2) % 4], ベクトル (equivalentQuadraticControlPointX - 1, -equivalentQuadraticControlPointX), endThickness, orientation + 3 ）で求める。
alignedCornerRect を rectangle（curveStartPoint と curveEndPoint を含む矩形）とする。
projectionToCornerRect を変換行列で、 (alignedCornerRect の x座標, alignedCornerRect の y座標) で平行移動、 (alignedCornerRect の幅, alignedCornerRect の高さ) で拡大縮小、 (0.5, 0.5) で平行移動、 90deg * orientation で回転、 (-0.5, -0.5) で平行移動したもの。
K を 0.5^{abs(curvature)} とする。
0 から 1 の範囲で T を走査：
1. A を T^K とする。
2. B を 1 - (1 - T)^K とする。
3. normalizedPoint は curvature が正なら (A, B)、負なら (B, A)。
4. absolutePoint を projectionToCornerRect で変換。
5. もし absolutePoint が trimRect 内なら path をそこへ拡張。
Note: ユーザーエージェントは例えばベジエ曲線連結などで本アルゴリズムを近似してもよい（性能と描画精度のバランスのため）。

点 originalPoint、2成分ベクトル offsetFromControlPoint、数値 thickness、orientation が与えられたときの aligned corner point 計算手順：

length を hypot(offsetFromControlPoint.x, offsetFromControlPoint.y) とする。
offsetFromControlPoint を 90度 × orientation で回転し thickness 倍する。
originalPoint を offsetFromControlPoint.x / length, offsetFromControlPoint.y / length だけ平行移動した点を返す。

矩形 rect から clockwise quad を得る手順： rectangle rect について、四辺形の点は (rect の x座標, rect の y座標), (rect の x座標 + rect の幅, rect の y座標), (rect の x座標 + rect の幅, rect の y座標 + rect の高さ), (rect の x座標, rect の y座標 + rect の高さ)。

テスト

3.9.5. 対角の半径の制約

凹型のcorner-shape値（superellipse パラメータが負）が指定されている場合、斜めに対角の角どうしが重なってしまうことがあります。

次の例は、制約しないと角が重なってしまう場合です。

div {
  corner-shape: scoop;
  border-top-left-radius: 80%;
  border-bottom-right-radius: 80%;
}

これを防ぐため、4つの半径は互いに重ならないよう制約されます。これは対角の角ごとにハル（凸包）多角形を計算し、両方の角に同時に適用しても多角形同士が交差しない最大縮小係数を求めることで実現します。

凹型 corner-shape 用の opposite corner scale factor を、要素 element に対して計算する手順:

rect をelementのborder boxとする。
topRightHull を、normalized inner corner hull（ elementの計算値 corner-top-right-shape を使い、矩形 (rect の幅 − elementの横方向 border-top-right-radius, 0, rect の計算値 border-top-right-radius) にマップする）とする。
bottomRightHull を、normalized inner corner hull (elementの計算値 corner-bottom-right-shape を使い、(0.5,0.5)原点で90度回転、矩形(rect の幅 − elementの横方向 border-bottom-right-radius, rect の高さ − elementの縦方向 border-bottom-right-radius, element の計算値 border-bottom-right-radius)にマップしたものとする。
bottomLeftHull をelementのnormalized inner corner hull (element の計算値 corner-bottom-right-shape を用い、(0.5, 0.5)原点で180度回転し、矩形(0, rect の高さ − elementの縦方向 border-bottom-left-radius、 elementの計算値 border-bottom-left-radius) にマップする）とする。
topLeftHull を、 normalized inner corner hull （element の計算値 corner-top-left-shape を使い、 (0.5,0.5)原点で270度回転、(0, 0, element の計算値 border-top-left-radius)にマップする）とする。
scaleFactorA は topLeftHull と bottomRightHull を両方とも最初の点を原点としてスケールしたときに多角形が交差しなくなる最大の数値とする。
scaleFactorB は topRightHull と bottomLeftHull を最初の点を原点として共通スケールしたとき交差しなくなる最大の数値とする。
min(1, scaleFactorA, scaleFactorB) を返す。

3.9.6. 角形状の補間

<corner-shape-value> は常に superellipse() で superellipse パラメータを変数として表現できるため、2つの <corner-shape-value> 間の補間はその superellipse パラメータ自体を補間します。しかし log2 を利用しているため、線形補間すると凹型角の補間速度が凸型角よりも大きくなります。それを均等化するために、superellipse 補間式は superellipse パラメータを0〜1の値に、またその逆に変換する方法を定めます。

normalized superellipse half corner を superellipse パラメータ s から求めるには、以下のいずれか最初に当てはまるものを返す:

-∞

0 を返す。

∞

1 を返す。

その他

k を 0.5^abs(s) とする。
convexHalfCorner を 0.5^k とする。
もし s < 0 なら 1 - convexHalfCorner を返す。
convexHalfCorner を返す。

normalized inner corner hull を、superellipse パラメータ curvature から計算するには:

もし curvature が 0 以上なら « (1, 1), (1, 0), (0, 1) » の三角形を返す。
axisLineA を (1, 0) 〜 (1, 1) の線分とする。
axisLineB を (0, 1) 〜 (1, 1) の線分とする。
normalizedHalfCorner を normalized superellipse half corner（パラメータ curvature で）とする。
halfCornerPoint を (normalizedHalfCorner, 1 - normalizedHalfCorner)とする。
lineFromCenterToHalfCorner を (0, 0) 〜 halfCornerPoint の線分とする。
tangentLine を lineFromCenterToHalfCorner に垂直で halfCornerPoint を通る直線とする。
intersectionA を axisLineA と tangentLine の交点とする。
intersectionB を axisLineB と tangentLine の交点とする。
« (1, 1), (1, 0), intersectionA, intersectionB, (0, 1), (1, 1) » という五角形を返す。

superellipse パラメータ s を 0〜1 の補間値に変換するには、normalized superellipse half corner（s）を返す。

<number [0,1]> interpolationValue を superellipse パラメータに戻すには、次の通り:

0

-∞ を返す。

0.5

0 を返す。

1

∞ を返す。

その他

convexHalfCorner を interpolationValue とする。
もし interpolationValue < 0.5 なら convexHalfCorner = 1 - interpolationValue。
k を ln(0.5) / ln(convexHalfCorner) とする。
s を log2(k) とする。
もし interpolationValue < 0.5 なら -s を返す。
s を返す。

テスト

corner-shape-interpolation.html (ライブテスト) (ソース)

4. ボーダー画像

著者はボーダースタイルの代わりとなる画像を指定することができます。この場合、ボーダーのデザインは border-image-source で指定した画像の「辺と角」部分が使われ、その各パーツが border image area のサイズに合うようにスライス、拡大、伸長されることがあります。 border-image プロパティはレイアウトには影響を与えません。ボックスやその内容、周囲のレイアウトはborder-width とborder-style のみで決まります。

この例では、上下のボーダーがオレンジのひし形複数、左右が単一のひし形（伸長される）からできたボーダーを作ります。コーナーは色の異なるひし形です。タイル画像は以下：ひし形以外は透明です。

Tile for border

この画像は81×81ピクセルで、9等分が必要です。 CSSは下のようにできます：

DIV {
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
 }

12×5emのDIVに適用した場合の例：

Element with a diamond border

これはより複雑な例で、ボーダー画像がフォールバックの border-style とどう対応するか、またボーダー領域を超えてはみ出ることもあることを示します。ボーダー画像は波線の緑ボーダー＋拡張された角エフェクトです:

Diagram: The border image shows a wavy green border
with more exaggerated waves towards the corners,
which are capped by a disconnected green circle.
Four cuts at 124px offsets from each side
divide the image into 124px-wide square corners,
124px-wide but thin side slices,
and a small center square. — border-image-source 画像。124pxの位置で4カットし、9分割する。

他のボーダープロパティがタイル配置などに関与すると：

Diagram: The image-less (fallback) rendering
has a green double border.
The rendering with border-image shows the wavy green border,
ith the waves getting longer as they reach the corners.
The corner tiles render as 124px-wide squares
and the side tiles repeat a whole number of times
to fill the space in between.
Because of the gradual corner effects,
the tiles extend deep into the padding area.
The whole border image effect is outset 31px,
so that the troughs of the waves align
just outside the padding edge. — 各ボーダー画像プロパティの相互作用およびボーダー画像有無での描画比較。

ここで border-width は12pxですが、 border-image-width は124pxに計算されます。 border image areaはborder boxから31px外へアウトセットされ margin area へ入り込みます。画像が読み込めない・UAが非対応の場合はフォールバックとして緑の double border になります。

border 省略指定では border-image もリセットされることに注意。これでボーダー効果一括オフ・リセットが簡単です:

.notebox {
  border: double orange;
  /* 'border' shorthand を先に指定しないと border-image が消える */
  border-image: url("border.png") 30 round;
  /* 他の border 系は後から指定可能 */
  border-width: thin thick;
}
...
.sidebar .notebox {
  box-shadow: 0 0 5px gray;
  border-radius: 5px;
  border: none; /* 全てのボーダーをオフ */
  /* 'border' shorthand は border-image もリセットする */
}

4.1. 画像ソース: border-image-source プロパティ

名前:	border-image-source
値:	none \| <image>
初期値:	none
適用対象:	全要素。ただし border-collapse が collapse の場合テーブル内部要素は除く
継承:	no
パーセント値:	N/A
計算値:	キーワードnoneまたは計算済み<image>
正準順序:	文法に従う
アニメーション型:	discrete

テスト

指定した画像を、border-style プロパティによる描画の代わりとしてボーダーへ適用します。さらに fill キーワードが border-image-slice で指定された場合、追加の背景画像としても利用されます。値が none または画像が利用不可・プロパティが非適用の場合は従来のボーダースタイルになります。そうでなければ、要素の border-style を使わず、以下に記す border image が描画されます。

4.2. イメージのスライス: border-image-slice プロパティ

Name:	border-image-slice
Value:	[<number [0,∞]> \| <percentage [0,∞]>]{1,4} && fill?
Initial:	100%
Applies to:	全要素。ただし border-collapse が collapse の内部テーブル要素は除く
Inherited:	いいえ
Percentages:	border image のサイズに対する割合を参照
Computed value:	それぞれが数値またはパーセンテージである4つの値。指定されていれば fill キーワードを含む
Canonical order:	文法に従う
Animation type:	計算値による

Tests

このプロパティは画像の上端・右端・下端・左端から内向きのオフセットを指定し、画像を 9 つの領域（4 つの角、4 つの辺、そして中央）に分割します。中央部分は、fill キーワードがない限り破棄され（完全に透明として扱われ）ます。（中央部分は背景の上に描画されます；Drawing the Border Image を参照。）

コンポーネント値が1つだけの場合はすべての辺に適用されます。 2つある場合は上と下が最初の値、右と左が2つ目の値になります。 3つある場合は上が1つ目、左と右が2つ目、下が3つ目になります。 4つある場合は順に上・右・下・左に適用されます。

<percentage [0,∞]>: パーセンテージは画像のサイズに対する割合です：水平方向のオフセットは画像の幅に対して、垂直方向のオフセットは高さに対して相対的です。
<number [0,∞]>: 数値は、ラスタ画像であれば画像内のピクセル数を表し、ベクター画像であればベクター座標を表します。
fill: fill キーワードが存在する場合、 border-image の中央部分が保持されます。（デフォルトでは破棄され、空として扱われます。）

負の値は無効です。画像サイズより大きい計算済み値は 100% として解釈されます。

border-image-slice 値で与えられる領域は重なり得ます。しかし右と左の幅の合計が画像幅以上であるときは、上辺・下辺および中央部分の画像は空になります—これは、これらの部分に非空の透過画像が指定されたのと同じ効果です。上と下についても同様です。

スライスを決めるために画像のサイズが必要な場合（例えば自然な寸法がない SVG など）、その画像はデフォルトのサイズ付けアルゴリズムに従って指定サイズなしでサイズ付けされ、 border image area がデフォルトオブジェクトサイズとして用いられます。

Diagram: two horizontal cuts and two vertical cuts through an image — 値 25% 30% 12% 20% に対応するカットを示す図

4.3. 描画領域: border-image-width プロパティ

Name:	border-image-width
Value:	[ <length-percentage [0,∞]> \| <number [0,∞]> \| auto ]{1,4}
Initial:	1
Applies to:	全要素。ただし border-collapse が collapse の内部テーブル要素は除く
Inherited:	いいえ
Percentages:	border image area の幅/高さに対する割合
Computed value:	それぞれが数値、キーワード auto、または計算済みの <length-percentage> 値である4つの値
Canonical order:	文法に従う
Animation type:	計算値による

Tests

border image は border image area と呼ばれる領域の内側に描画されます。この領域の境界はデフォルトで border box に対応します；詳細は border-image-outset を参照してください。

border-image-width の4つの値は、 border image area を 9 つの領域に分割するために用いるオフセットを指定します。これらのオフセットはその領域の上・右・下・左の各辺からの内向きの距離を表します。

コンポーネント値が1つだけの場合はすべての辺に適用されます。 2つある場合は上と下が1つ目、右と左が2つ目になります。 3つある場合は上が1つ目、左と右が2つ目、下が3つ目になります。 4つある場合は順に上・右・下・左に適用されます。

値の意味は次のとおりです:

<length-percentage [0,∞]>: パーセンテージは border image area のサイズに対する割合を指します：水平方向のオフセットは領域の幅に対し、垂直方向は高さに対して参照されます。
<number [0,∞]>: 数値は対応する計算済みの border-width の倍数を表します。
auto: auto が指定された場合、使用される border-image-width は、対応する画像スライスの自然な幅または高さ（該当する方）になります（border-image-slice を参照）。もし画像に必要な自然寸法がない場合は、代わりに対応する計算済みの border-width が使用されます。

任意の border-image-width 値に負の値は無効です。

もし対向する2つの border-image-width オフセットが重なってしまうほど大きい場合、すべての border-image-width オフセットの使用値は比例して縮小され、重複しなくなるまで調整されます。数式で表すと： L_width を border image area の幅、L_height をその高さ、 W_side を side 側の border-image-width オフセットとすると、 f = min(L_width/(W_left+W_right), L_height/(W_top+W_bottom)). もし f < 1 なら、すべての W はそれらに f を乗じて縮小されます。

4.4. エッジのはみ出し: border-image-outset プロパティ

Name:	border-image-outset
Value:	[ <length [0,∞]> \| <number [0,∞]> ]{1,4}
Initial:	0
Applies to:	全要素。ただし border-collapse が collapse の内部テーブル要素は除く
Inherited:	no
Percentages:	N/A
Computed value:	4つの値、それぞれ数値または絶対長さ
Canonical order:	文法に従う
Animation type:	計算値による

Tests

これらの値は、border image area が border box を越えてどれだけ拡張されるかを指定します。

<length [0,∞]>: 指定された長さのアウトセットを表します。
<number [0,∞]>: 対応する計算済みの border-width の倍数としてのアウトセットを表します。

負の値は無効です。

border box の外側に描画される border-image の部分は ink overflow と見なされ、スクロールを発生させません。そのような部分はマウスイベントに対しても不可視であり、要素の代わりにイベントを捕捉しません。

Note: スクロール機構を誘発しないとはいえ、アウトセットした画像は祖先要素やビューポートによってクリップされることがあります。

4.5. イメージのタイル化: border-image-repeat プロパティ

Name:	border-image-repeat
Value:	[ stretch \| repeat \| round \| space ]{1,2}
Initial:	stretch
Applies to:	全要素。ただし border-collapse が collapse の内部テーブル要素は除く
Inherited:	no
Percentages:	N/A
Computed value:	2つのキーワード、それぞれ軸ごと
Canonical order:	文法に従う
Animation type:	discrete

Tests

このプロパティは、border image の辺および中央部分のイメージがどのようにスケーリングおよびタイル化されるかを指定します。最初のキーワードは上・中央・下パーツの水平方向のスケーリングおよびタイル化に適用され、 2つ目は左・中央・右パーツの垂直方向のスケーリングおよびタイル化に適用されます；Drawing the Border Image を参照してください。 2つ目のキーワードが省略された場合は、最初のキーワードと同じものと見なされます。値の意味は次のとおりです：

stretch: イメージは対応する領域を埋めるように伸張されます。
repeat: イメージはタイル（繰り返し）されて対応する領域を埋めます。
round: イメージはタイル（繰り返し）されて対応する領域を埋めます。もし整数個のタイルで領域を埋められない場合、イメージはそれが可能になるように再スケールされます。
space: イメージはタイル（繰り返し）されて対応する領域を埋めます。もし整数個のタイルで領域を埋められない場合、余白がタイルの周囲に分配されます。

ボーダーイメージ部分の正確なスケーリングとタイル化のプロセスは以下のセクションで示します。

4.6. ボーダーイメージの描画

border image （border-image-source で与えられる）が border-image-slice の値でスライスされた後、得られた9つの画像は、それぞれの border image region に、次の4ステップで拡大縮小・配置・タイル化される：

border-image-width へのスケール。
- 上下エッジ用2つの画像は、上端・下端 border image region の高さに合わせられ、幅は同比にスケールされる。
- 左右エッジ用画像は、左右 border image region の幅に合わせられ、高さは同比にスケールされる。
- コーナー画像は、各 border image region の幅・高さにスケールされる。
- 中央画像の幅は上画像のスケール係数でスケールされる（0または∞なら下画像の係数を使い、どちらもなければスケールされない）。高さは左画像のスケール係数でスケール（同様に右→なければそのまま）。
border-image-repeat へのスケール。
- 最初のキーワードが stretch の場合、上・中央・下画像をそれぞれ middle region の幅いっぱいまで水平方向にさらにスケールし、高さはそのまま。
- 最初のキーワードが round の場合、上・中央・下画像の幅を、middle region でちょうど整数個のタイルが収まるようにスケールする（background-repeat の round と同様）。
- 最初のキーワードが repeat または space の場合は、上・中央・下画像の幅は変更しない。
- 2つめキーワードの stretch、round、repeat、space も同じく、左右・中央・右の高さに適用。
1枚目のタイルを配置。
- 最初のキーワードが repeat の場合、上・中央・下各画像は自身の領域内で水平方向中央に配置。それ以外はそれぞれの領域左端に配置。
- 2つ目のキーワードが repeat の場合、左・中央・右各画像は自身の領域内で垂直方向中央に配置。それ以外は自身の領域上端に配置。
タイル化・描画。
- 画像を各自領域にタイルして埋める。
- space の場合、部分的なタイルは破棄され余白が均等に分配される。（タイル前後・間のギャップは等間隔になる）この結果、空の border-image side region になることも。
- 画像は通常の境界線と同じスタッキングレベルで描画（背景レイヤーの直前）。
- 中央画像は fill が border-image-source に指定されていれば描画される。

4.7. ボーダーイメージ省略記法: border-image プロパティ

Name:	border-image
Value:	<'border-image-source'> \|\| <'border-image-slice'> [ / <'border-image-width'> \| / <'border-image-width'>? / <'border-image-outset'> ]? \|\| <'border-image-repeat'>
Initial:	各個別プロパティ参照
Applies to:	各個別プロパティ参照
Inherited:	no
Percentages:	N/A
Computed value:	各個別プロパティ参照
Canonical order:	文法に従う
Animation type:	各個別プロパティ参照

テスト

このプロパティは border-image-source、 border-image-slice、border-image-width、border-image-outset、 border-image-repeat を1つの宣言でまとめて設定する省略プロパティです。省略された値は初期値になります。

4.8. テーブルへの影響

border-image プロパティは、 border-collapse が collapse に設定されたテーブルやインラインテーブルのボーダーに適用されます。ただし、この仕様ではそのような画像ボーダーがどのようにレンダリングされるかは定義しません。特に、画像ボーダーがテーブル端のセル・行・行グループのボーダーとどのように相互作用するか（ボーダー競合解決参照）については定義していません。

今後の仕様でレンダリングが定義される予定です。それまで UA は collapsed border のテーブルに border-image を適用しないことが推奨されます。

5. 部分的なボーダー

実装準備中

このセクションはまだ実装の準備ができていません。アイディアの記録と議論のためにこのリポジトリ内に存在しています。

このセクションの内容を実装しようとする前に、CSSWG (www-style@w3.org) までご連絡ください。

CSSのボーダーは伝統的にボーダーエッジ全体をカバーしますが、場合によってはボーダーの一部を隠したいことがあります。

これには2つの提案があります: 2番目はGCPMのもの、最初はその可読性重視の再構成案です。名称は良くない（提案募集）、という既知の問題です。クリッピングとして考えると問題があり、たとえば点線ボーダーであれば常に点の全体が描画されるべきで、点の途中で切れない方がよいです。つまりこれはクリップではなく、「描画の制限」として扱う方がよいです。

5.1. 部分ボーダー: border-limit プロパティ

Name:	border-limit
Value:	all \| [ sides \| corners ] <length-percentage [0,∞]>? \| [ top \| right \| bottom \| left ] <length-percentage [0,∞]>
Initial:	all
Applies to:	all elements, except table element when border-collapse is collapse
Inherited:	no
Percentages:	border-box基準
Computed value:	指定通り
Canonical order:	文法に従う
Animation type:	discrete

デフォルトではボーダー全体が描画されますが、ボーダーの一部だけに描画を限定できます。キーワードが範囲（部位）を指定し、長さまたはパーセントが描画量を指定します。

all: ボーダー全体を描画します。
sides: 角（border-radius で定義される範囲）を含まず辺のみ描画します。長さやパーセントは各辺の中央から測ります。 50% なら辺の中央50%だけが描画されます。デフォルトは全辺が描画されます。
corners: 角および指定された距離だけ辺の一部を描画します。長さは角領域に最も近い辺端から測ります。パーセントなら border box の絶対角から測ります。
left
right: left/right（縦）側ではその辺・角全体、top/bottom（横側）は指定通り left/right 部分のみ描画。距離の解釈は corners と同じ。
top
bottom: top/bottom（横）の場合はその辺・角全体、left/right（縦）の場合は指定通り top/bottom 部分のみ描画。距離の解釈は corners と同じ。

次の例は辺の中央50%だけを描画します。

div {
  border: solid;
  border-limit: sides 50%;
}

次の例は角の曲線部分のみを描画します。

div {
  border: solid;
  border-radius: 1em 2em;
  border-limit: corners;
}

次の例は上辺の左側4em分だけを描画します。

div {
  border-top: solid;
  border-limit: left 4em;
}

次の例は各角の最初の10pxだけを描画します：

div {
  border: solid;
  border-limit: corners 10px;
}

次の例は角の曲線部分＋辺の5px分を描画します：

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 5px;
}

次の例は角の曲線部分+辺の中央40%以外を描画します。

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 30%;
}

5.2. border-clip プロパティ

Name:	border-top-clip, border-right-clip, border-bottom-clip, border-left-clip, border-block-start-clip, border-block-end-clip, border-inline-start-clip, border-inline-end-clip
Value:	none \| [ <length-percentage [0,∞]> \| <flex> ]+
Initial:	none
Applies to:	全要素
Inherited:	no
Percentages:	border-edge side の長さに対する割合
Computed value:	none、または長さ・パーセントのリスト（指定通り）
Canonical order:	文法に従う
Animation type:	計算値による
Logical property group:	border-clip

これらのプロパティはそれぞれのボーダーをボーダーエッジに沿って部分に分割します。最初の部分は表示、2番目は非表示、3番目は表示、…となります。部分は長さ・パーセント・柔軟長さ（fr単位、[CSS3GRID] 参照）で指定できます。 noneはボーダーを分割せず通常通りすべて表示する意味です。

flow-relative ロングハンド（border-block-start-clip 等）は、要素の writing-mode、direction、text-orientationにより physical ロングハンド（border-top-clip 等）に対応します。

Name:	border-block-clip, border-inline-clip
Value:	<'border-top-clip'>
Initial:	個別プロパティを参照
Applies to:	個別プロパティを参照
Inherited:	個別プロパティを参照
Percentages:	個別プロパティを参照
Computed value:	個別プロパティを参照
Animation type:	個別プロパティを参照
Canonical order:	文法に従う

これら2つの省略プロパティは、それぞれ border-block-start-clip & border-block-end-clip、 border-inline-start-clip & border-inline-end-clip をまとめて設定します。

Name:	border-clip
Value:	<'border-top-clip'>
Initial:	個別プロパティを参照
Applies to:	個別プロパティを参照
Inherited:	個別プロパティを参照
Percentages:	個別プロパティを参照
Computed value:	個別プロパティを参照
Animation type:	個別プロパティを参照
Canonical order:	文法に従う

border-clip はロングハンドプロパティの省略プロパティで、すべての辺を同じ値で設定します。

リストで指定した部分の合計がボーダーより短ければ、残りは指定した柔軟長さの比率で分割されます。柔軟長さがない場合は末尾に 1fr を指定したとみなします。

リストで指定した部分がボーダーより長い場合は、先に記述された各部分が順にボーダーの終わりまで描画され、柔軟長さは全てゼロになります。

水平ボーダーでは left→right、垂直ボーダーでは top→bottom の順で並びます。

実際のボーダー分割はまずすべてのフレックス長さをゼロで配置し、余り領域を指定フレックスに比例して配分して決まります。

border-clip: 10px 1fr 10px;

border-top-clip: 10px 1fr 10px;
border-bottom-clip: 10px 1fr 10px;
border-right-clip: 5px 1fr 5px;
border-left-clip: 5px 1fr 5px;

最初の部分をゼロ長さにすると、前例のボーダーの反転版も簡単です：

border-top-clip: 0 10px 1fr 10px;
border-bottom-clip: 0 10px 1fr 10px;
border-right-clip: 0 5px 1fr 5px;
border-left-clip: 0 5px 1fr 5px;

border: thin solid black;
border-clip: 0 1fr; /* hide borders */
border-top-clip: 10px 1fr 10px; /* make certain borders visible */
border-bottom-clip: 10px 1fr 10px;

border-top: thin solid black;
border-bottom: thin solid black;
border-top-clip: 10px;
border-bottom-clip: 10px;

border-top: thin solid black;
border-clip: 10px;

このようなレンダリング:

A sentence consists of words¹.

¹ Most often.

は次のスタイルシートで実現できます:

@footnote {
  border-top: thin solid black;
  border-clip: 4em;
}

border: 4px solid black;
border-top-clip: 40px 20px 0 1fr 20px 20px 0 1fr 40px;

この例では、上辺の両端に40pxのボーダー部分が表示され、その内側に少なくとも20pxの非表示部分があります。これらの非表示セグメント内には、それぞれ20pxの可視ボーダー部分が、間に20pxの非表示ボーダーを挟んで現れます。

赤で表示されているフラグメントは説明用であり、準拠UAでは見えなくなります。

border: 4px solid black;
border-top-clip: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;

この例では可視ボーダー部分は1個を除きすべて柔軟長さで指定されており、拡大・縮小に応じて長さが変化します。次は1fr=10pxになったときの描画例です：

次は1fr=30pxになったときの例です：

赤で表示されているフラグメントは説明用であり、準拠UAでは黒で描画されます。

テスト

6. ドロップシャドウ

6.1. 影の色付け: box-shadow-color プロパティ

名前:	box-shadow-color
値:	<color>#
初期値:	currentcolor
適用対象:	すべての要素
継承:	no
パーセンテージ:	N/A
計算値:	リスト（各要素は計算済み色）
正準順序:	文法通り
アニメーション型:	計算値による

box-shadow-color プロパティは、1つ以上のドロップシャドウ色を定義します。このプロパティはカンマ区切りの影の色リストを受け付けます。

「階層化、レイアウト、その他の詳細」のセクションを参照してください。 box-shadow-colorが他のカンマ区切りのドロップシャドウプロパティとどのように連携し、各ドロップシャドウレイヤーを構成するかが説明されています。

テスト

6.2. 影のオフセット: box-shadow-offset プロパティ

名前:	box-shadow-offset
値:	[ none \| <length>{1,2} ]#
初期値:	none
適用対象:	すべての要素
継承:	no
パーセンテージ:	N/A
計算値:	リスト（各要素は none または要素のボックスからのオフセットのペア（横・縦））
正準順序:	文法通り
アニメーション型:	計算値による none は非none値と補間時 0 0 として扱う

box-shadow-offset プロパティは、1つ以上のドロップシャドウのオフセットを定義します。このプロパティはカンマ区切りのリストを受け付けます。その各アイテムは none の値（影なし）、 <length>値2つのペア（横・縦オフセット指定）、あるいは1つの <length>（両オフセット同値指定）が選べます。

none: 影は描画されません。他の box-shadow プロパティの値はこの影に対して効果がありません。
1st <length>: 影の水平方向オフセットを指定します。正ならボックスの右へ、負なら左へオフセットされます。
1つだけ指定された場合、横・縦ともその値になります。
2nd <length>: 影の垂直方向オフセットを指定します。正値で下方向、負値で上方向オフセットされます。

「階層化、レイアウト、その他の詳細」のセクションを参照してください。 box-shadow-offsetが他のカンマ区切りシャドウプロパティとどう連携し各シャドウレイヤーを構成するかが説明されています。

テスト

6.3. シャドウのぼかし: box-shadow-blur プロパティ

名前:	box-shadow-blur
値:	<length [0,∞]>#
初期値:	0
適用対象:	すべての要素
継承:	no
パーセンテージ:	N/A
計算値:	リスト（各要素は <length>）
正準順序:	文法通り
アニメーション型:	計算値による

box-shadow-blur プロパティはドロップシャドウの1つ以上のぼかし半径を定義します。このプロパティはカンマ区切りの <length> 値のリストを受け付けます。

負の値は無効です。ぼかし値が0の場合、シャドウの縁はシャープになります。それ以外は値が大きいほど縁がよりぼけます。詳しくはShadow Blurring参照。

「階層化・レイアウト・その他の詳細」セクションを参照してください。 box-shadow-blurが他のカンマ区切りのドロップシャドウプロパティとどのように連携し各ドロップシャドウレイヤーを構成するかが説明されています。

テスト

6.4. シャドウの広がり: box-shadow-spread プロパティ

名前:	box-shadow-spread
値:	<length>#
初期値:	0
適用対象:	すべての要素
継承:	no
パーセンテージ:	N/A
計算値:	リスト（各要素は <length>）
正準順序:	文法通り
アニメーション型:	計算値による

box-shadow-spread プロパティはドロップシャドウの1つ以上の広がり距離を定義します。このプロパティはカンマ区切りの <length> 値のリストを受け付けます。

正の値の場合はシャドウが指定した半径分全方向に拡大します。負の値なら縮小します。詳しくはShadow Shape参照。

内側シャドウ（inner shadow）の場合、シャドウを拡大（影エリアを増やす）＝輪郭形状は縮小になります。

「階層化・レイアウト・その他の詳細」セクションを参照してください。 box-shadow-spreadが他のカンマ区切りのドロップシャドウプロパティとどのように連携し各ドロップシャドウレイヤーを構成するかが説明されています。

テスト

6.5. シャドウの配置: box-shadow-position プロパティ

名前:	box-shadow-position
値:	[ outset \| inset ]#
初期値:	outset
適用対象:	すべての要素
継承:	no
パーセンテージ:	N/A
計算値:	リスト（各要素はキーワード1つ）
正準順序:	文法通り
アニメーション型:	計算値による

box-shadow-position プロパティはドロップシャドウの1つ以上の配置を指定します。このプロパティはカンマ区切りの outset および inset キーワードのリストを受け付けます。

outset: ドロップシャドウを外側ボックスシャドウにします。つまり、ボックスがキャンバス上に持ち上がったかのように、キャンバスに影を落とします。
inset: ドロップシャドウを内側ボックスシャドウにします。つまり、ボックスがキャンバスから切り抜かれ、後ろにずらされたかのように、キャンバス側へ影を落とします。

「階層化・レイアウト・その他の詳細」セクションを参照してください。 box-shadow-positionが他のカンマ区切りドロップシャドウプロパティとどう連携し各ドロップシャドウレイヤーを構成するかが説明されています。

テスト

6.6. ドロップシャドウのショートハンド: box-shadow プロパティ

名前:	box-shadow
値:	<spread-shadow>#
初期値:	none
適用対象:	全ての要素
継承:	いいえ
パーセンテージ:	該当なし
計算値:	個々のプロパティを参照
正規順序:	文法に従う
アニメーションタイプ:	個々のプロパティを参照

The box-shadow プロパティはボックスに1つ以上のドロップシャドウを付加します。プロパティはカンマ区切りのシャドウ一覧を受け取り、前から後ろの順に並べます。

各シャドウは <spread-shadow> として与えられ、 2つの <length> 値で定義される box-shadow-offset の外形を示し、任意の box-shadow-blur、box-shadow-spread、box-shadow-color、および box-shadow-position の値をとることができます。省略された長さは 0 となり、色が省略された場合は、指定されたオフセットが none のときに transparent、それ以外は currentcolor が既定値になります。

注: 異なる <length> 値の解析における曖昧さを避けるため、オフセットは box-shadow-offset とは異なり、2つの <length> 値として指定する必要があります。 box-shadow-offset プロパティでは単一の <length> 値で両方のオフセットを指定できますが、ここではそうではありません。

<spread-shadow> = <'box-shadow-color'>? && [ [ none | <length>{2} ] [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?

以下の例は、シャドウに対する spread と blur の効果を示しています:

width: 100px; height: 100px;
border: 12px solid blue; background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;

上記のサンプルコードは、12pxの青い境界線を持つ100px×100pxのオレンジ色のボックスを生成します。右上／左下の角は角張っており、左上／右下の角は楕円状に丸められています。2つのシャドウが作成されます: 内側のシャドウはそのオフセットとスプレッドにより、ボックスの上辺と左辺に沿って20px幅の濃いオレンジの帯を作り（丸められた左上の境界形状に合わせて曲がります）；外側のシャドウはボックスの形の204px×204pxの灰色の複製をボックスの背後に生成し、ボックスの上と左の端から24px下・24px右にオフセットされます。外側シャドウに12pxのぼかし半径を適用すると、シャドウ色から透明への段階的な変化がエッジに沿って生じ、その変化はシャドウの端に沿って中心に対して24pxの範囲で視認できます。

6.6.1. 影の形状、スプレッド、およびノックアウト

外側の outer box-shadow は、要素の border-box が不透明であるかのようにシャドウを投影します。スプレッド距離がゼロであると仮定すると、その周辺は border-box と全く同じ大きさと形状を持ちます。シャドウはボーダーの外側にのみ描かれ、要素の border-box の内側で切り取られます。

内側の inner box-shadow は、パディングエッジの外側が不透明であるかのようにシャドウを投影します。スプレッド距離がゼロであると仮定すると、その周辺は padding box と全く同じ大きさと形状を持ちます。シャドウはパディングの内側にのみ描かれ、要素の padding box の外側で切り取られます。

もし spread distance が定義されている場合、上で定義したシャドウの周辺は外側シャドウの場合は外側に拡張され（outer box-shadows）、内側シャドウの場合は内側に縮小され（inner box-shadows）、シャドウの直線部分を spread distance だけ外側（内側シャドウでは内側へ）にオフセットして（幅/高さをゼロで切り上げ）、結果として得られる幅/高さを計算します。

以下は、青い境界線を持つオレンジ色のボックスにドロップシャドウを付けた例です。

`border:5px solid blue; background-color:orange; width: 144px; height: 144px;`	`border-radius: 20px;`	`border-radius: 0;`
`box-shadow: rgba(0,0,0,0.4) 10px 10px;`
`box-shadow: rgba(0,0,0,0.4) 10px 10px inset`
`box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */`
`box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset`

スプレッドが適用されたときにボックスの形状を保持するため、シャドウの角半径も（内側シャドウでは減少して）border-box（padding-box）の半径にスプレッド距離を加算（減算し、ゼロで切り上げ）して増減されます。外側シャドウの場合、丸い角の鋭さを維持するために border radius が各次元ごとに調整されます。

border-image は box-shadow の形状に影響を与えません。

6.6.2. シャドウのエッジのぼかし

0 以外のぼかし半径（blur radius）は、生成されるシャドウがガウスフィルタのようなぼかし処理を受けるべきことを示します。正確なアルゴリズムは定義されていませんが、結果として得られるシャドウは、ぼかし半径の半分を標準偏差とするガウスぼかしをシャドウに適用して生成される画像を近似しなければなりません（各ピクセルは期待値の5%以内であること）。

注: これは、長くまっすぐなシャドウの端の場合、ぼかし半径はシャドウのエッジに垂直で、エッジの中心を基準にしたおよそぼかし半径の2倍の長さの色の遷移を作成し、その範囲はシャドウの内側の端点でほぼ完全なシャドウ色から外側の端点でほぼ完全に透明になることを意味します。

6.7. レイヤリング、レイアウト、およびその他の詳細

ドロップシャドウは協調値リスト（coordinated value list）として宣言され、これは box-shadow-* プロパティから構成されます。これらは box-shadow-offset を基底プロパティとする協調リストプロパティ群を形成します。詳細は CSS Values 4 § A Coordinating List-Valued Properties を参照してください。

シャドウ効果は前から後ろへ適用されます: 最初のシャドウが最前面にあり、他はその背後に重ねられます。シャドウはレイアウトに影響を与えず、他のボックスやテキスト、またはそれらのシャドウと重なったり重ねられたりする可能性があります。スタッキングコンテキストと描画順に関しては、要素の外側の outer box-shadows はその要素の背景の直下に描かれ、要素の内側の inner shadows はその要素の背景の直上に描かれます（ボーダーや border image がある場合はそれらの下に描かれます）。

特に指定がない限り、ドロップシャドウは principal box にのみ適用されます。影響を受けるボックスが複数のフラグメントを持つ場合、シャドウは box-decoration-break に指定された通りに適用されます。

シャドウはスクロールを引き起こしたり、スクロール可能領域のサイズを増加させたりしません。

外側シャドウは collapsing border モデル内の内部テーブル要素には影響を与えません。 collapsing border モデルで単一の境界エッジに対してシャドウが定義されており、そのエッジが複数の境界幅（例えば、ある行が他の行より厚い境界を持つテーブルの外側シャドウや、異なる境界厚さを持つセルに接する rowspan のテーブルセルの内側シャドウ）を持つ場合、そのシャドウの正確な位置とレンダリングは未定義となります。

7. ボーダー形状

corner-shape と border-radius はボーダーのスタイルに多少の表現力を与えますが、これらは依然としてボーダーが矩形であるという前提で動作します。

border-shape 関数はこれらの機能を拡張し、作者が任意の基本図形（basic shape）を使用してボーダーのパスを指定できるようにします。

7.1. border-shape プロパティ

名前:	border-shape
値:	none \| [ <basic-shape> <geometry-box>?]{1,2}
初期値:	none
適用対象:	全ての要素
継承:	いいえ
パーセンテージ:	本文を参照
計算値:	リスト、各項目は計算された色
正規順序:	文法に従う
アニメーションタイプ:	計算値による

border-shape プロパティは単一の <basic-shape> または 2 つの <basic-shape> を受け取り、それぞれ1つまたは2つのパスを生成します。

2つの <basic-shape> 値が与えられると、ボーダーは2つのパス間の形状としてレンダリングされます。単一の <basic-shape> のみが与えられた場合、ボーダーはストロークとしてレンダリングされ、ストローク幅は該当する面の計算された border width になります。

ボーダーの塗りつぶし色は該当する面の計算された border-color です。

<geometry-box> が与えられていない場合、パーセンテージの既定値の計算は与えられた <basic-shape> の数に応じて異なります。

2つの <basic-shape> 値が与えられると、最初の（外側の）値は border box にデフォルトされ、2番目（内側）の値は padding box にデフォルトされます。これにより、異なる border-width プロパティを最終的な形状に反映させることができます。

単一の <basic-shape> 値が与えられると、<geometry-box> は half-border-box にデフォルトされます。これにより、既定のボーダー動作と一致する方法でストロークが行われます。

border-shape プロパティは border-radius および corner-shape と互換性がありません。要素の計算値の border-shape が none でない場合、その border-radius は無視され、0 に設定されているかのように扱われます。corner-shape は暗黙的に無視されます。これは corner-shape が border-radius と併用されることを前提としているためです。

外側の outer box-shadow は外側パスの外側に沿い、内側の inner box-shadow は内側パスの内側に沿います。両者ともストロークとしてレンダリングされ、ストローク幅は spread * 2 であり、ボーダー形状によってクリップされます。

border-shape はジオメトリやレイアウトに影響を与えず、これらは依然として既存の border-width プロパティを用いて計算されます。

border-shape はボックス内のコンテンツのフローには影響を与えません。注: 作者は border-shape を shape-inside と組み合わせて使用し、ボックスを装飾しつつテキストフローを制御する効果を作成できます。

内側の border-shape は、overflow コンテンツを border-radius と同様にクリップします（corner clipping を参照）。

これは置換要素のクリッピングにどのように影響するべきでしょうか？

要素の border shape に対する該当する面（relevant side）は、次の順序（block-start, inline-start, block-end, および inline-end）で最初に非 none の border style を持つ面、または全てが none の場合は block-start です。

もし element の計算済みの border-block-start-style が none でないなら、block-start を返す。
もし element の計算済みの border-inline-start-style が none でないなら、inline-start を返す。
もし element の計算済みの border-block-end-style が none でないなら、block-end を返す。
もし element の計算済みの border-inline-end-style が none でないなら、inline-end を返す。
block-start を返す。

テスト

プライバシーに関する考慮事項

この仕様に関して新しいプライバシー上の考慮事項は報告されていません。

セキュリティに関する考慮事項

この仕様に関して新しいセキュリティ上の考慮事項は報告されていません。

変更点

2025年7月22日の最初の公開作業草案以降の変更

corner-* ショートハンドを追加
corners を corner に改名
Web Platform Tests のカバレッジを追加
[CSS3BG] に関連するボーダーとシャドウの全文を取り込み
border-clip-* プロパティを border-*-clip に改名し、論理的なロングハンドとショートハンドを追加
normal 値を border-*-clip プロパティの none に改名
border-*-*-radius ロングハンドの新しい構文（水平半径と垂直半径をスラッシュで区切る）を追加
<length> の単一値で box-shadow-offset の両方のオフセットを同じ値に設定できるように許可

[CSS3BG] 以降の追加

<image-1D> を border-color とそのロングハンドの値として追加
物理的および論理的な border-*-radius ショートハンドを追加
corner-shape と corner-*-shape ショートハンドを追加、関連する corner および corner-* ショートハンドも追加
border-shape を追加
部分的ボーダー（partial borders）を border-limit および border-*-clip プロパティで追加
box-shadow-* ロングハンドを追加し、box-shadow をショートハンドに変更
論理的なボーダープロパティを [CSS-LOGICAL-1] からこの仕様に移動

謝辞

[CSS1]、[CSS2]、および [CSS3BG] の多くの貢献者に加えて、編集者は本レベル4に関して特に以下の方々に感謝します: Tab Atkins, Noam Rosenthal, Håkon Wium Lie, Oriol Brufau, および Guillaume Lebas。

適合性

文書の規約

準拠要件は、記述的な主張と RFC 2119 用語の組み合わせで表現されます。規範的な部分におけるキーワード「MUST」、「MUST NOT」、「REQUIRED」、「SHALL」、「SHALL NOT」、「SHOULD」、「SHOULD NOT」、「RECOMMENDED」、「MAY」、および「OPTIONAL」は RFC 2119 に記載されている通りに解釈されるものとします。ただし、可読性のために、これらの語はこの仕様内で常に大文字で表記されるわけではありません。

この仕様の本文は、明示的に非規範的とマークされたセクション、例、および注を除き、すべて規範です。 [RFC2119]

この仕様の例は「for example（例えば）」という語で導入されるか、以下のように class="example" で規範本文から分離して示されます。

情報的な注は「Note（注）」という語で始まり、以下のように class="note" で規範本文から分離して示されます。

注意喚起（Advisements）は特別な注意を呼び起こすためにスタイル指定された規範的なセクションであり、他の規範本文から <strong class="advisement"> で区別されます。例えば: ユーザーエージェントはアクセシブルな代替手段を提供しなければなりません。

適合クラス

この仕様への準拠は、次の3つの適合クラスで定義されます:

スタイルシートがこの仕様に準拠しているとは、このモジュールで定義された構文を使用するすべての記述が、ジェネリックな CSS 文法および本モジュールで定義された各機能の個別の文法に従って有効である場合を指します。

レンダラーがこの仕様に準拠しているとは、該当する仕様によってスタイルシートを解釈することに加え、文書を正しく解析しその通りにレンダリングすることで、本仕様で定義されたすべての機能をサポートする場合を指します。ただし、デバイスの制約により UA が文書を正しくレンダリングできない場合でも、そのことだけで UA が非準拠となるわけではありません。（例えば、モノクロモニタ上で色をレンダリングすることを要求されるわけではありません。）

オーサリングツールがこの仕様に準拠しているとは、ジェネリックな CSS 文法および本モジュールの各機能の個別の文法に従って構文的に正しいスタイルシートを書き、かつ本モジュールに記載されたスタイルシートの他のすべての準拠要件を満たす場合を指します。

部分的実装

作者がフォワードコンパチブルなパース規則を利用してフォールバック値を割り当てられるようにするため、 CSS レンダラーは、サポートレベルが実用に足りない at-rule、プロパティ、プロパティ値、キーワード、その他構文構成要素を不正として扱い（適切に無視）なければなりません。特に、ユーザーエージェントは、サポートされていないコンポーネント値を選択的に無視して、単一のマルチバリュープロパティ宣言内のサポートされる値だけを尊重してはなりません: もし任意の値が無効と見なされるなら（サポートされない値はそう扱われるべき）、CSS はその宣言全体が無視されることを要求します。

不安定または独自拡張機能の実装

将来の安定した CSS 機能との衝突を避けるために、 CSSWG はベストプラクティスの遵守を推奨します、不安定な機能や CSS への独自拡張の実装に関して。

非実験的実装

仕様が Candidate Recommendation の段階に達すると、非実験的な実装が可能になり、実装者は CR レベルの機能を仕様に従って正しく実装できていることを示せる場合、その機能の非プレフィックス実装を公開すべきです。

CSS の相互運用性を確立および維持するために、CSS ワーキンググループは非実験的な CSS レンダラーに対して、非プレフィックス実装を公開する前に実装報告（および必要ならその実装報告で使用したテストケース）を W3C に提出するよう要請します。W3C に提出されたテストケースは CSS ワーキンググループによってレビューおよび修正の対象となります。

テストケースと実装報告の提出に関する詳細は、CSS ワーキンググループのウェブサイト https://www.w3.org/Style/CSS/Test/ で確認できます。質問は public-css-testsuite@w3.org メーリングリスト宛に送ってください。

CSS のボーダーおよびボックス装飾モジュール レベル 4

要約

この文書の位置付け

1. はじめに

1.1. モジュールの相互作用

1.2. 値の定義

2. ボーダー

2.1. 線の色：border-colorプロパティ

2.2. 線のパターン: the border-style プロパティ

2.3. 線の太さ: the border-width プロパティ

2.4. ボーダー省略プロパティ

3. 角

3.1. 角のクリッピング

3.2. 色・スタイルの遷移

3.3. 重複曲線

3.4. テーブルへの効果

3.5. 角サイズ: border-*-*-radiusプロパティ

3.6. 角サイズ省略: border-radius および border-*-radius 省略プロパティ

3.6.1. 一辺の角のサイズ指定: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius の省略プロパティ

3.6.2. 全ての角を一度にサイズ指定: border-radius 省略プロパティ

3.7. 角の形状指定: corner-*-shape プロパティ

3.8. 角の形状省略指定: corner-shape および corner-*-shape 省略プロパティ

3.8.1. 一辺の角の形状指定: corner-*-shape 省略指定:

3.8.2. 全ての角の形状指定: corner-shape 省略プロパティ

3.9. 角サイズ・形状省略指定: corner および corner-* 省略プロパティ

3.9.1. 角一つのサイズ・形状指定: corner-top-left, corner-top-right, corner-bottom-right, corner-bottom-left, corner-start-start, corner-start-end, corner-end-start, corner-end-end 省略プロパティ

3.9.2. 一辺の角サイズ・形状指定: corner-top, corner-right, corner-bottom, corner-left, corner-block-start, corner-block-end, corner-inline-start, corner-inline-end 省略プロパティ

3.9.3. すべての角のサイズ・形状を一度に指定: corner 省略プロパティ

3.9.4. corner-shape のレンダリング

3.9.5. 対角の半径の制約

3.9.6. 角形状の補間

4. ボーダー画像

4.1. 画像ソース: border-image-source プロパティ

4.2. イメージのスライス: border-image-slice プロパティ

4.3. 描画領域: border-image-width プロパティ

4.4. エッジのはみ出し: border-image-outset プロパティ

4.5. イメージのタイル化: border-image-repeat プロパティ

4.6. ボーダーイメージの描画

4.7. ボーダーイメージ省略記法: border-image プロパティ

4.8. テーブルへの影響

5. 部分的なボーダー

5.1. 部分ボーダー: border-limit プロパティ

5.2. border-clip プロパティ

6. ドロップシャドウ

6.1. 影の色付け: box-shadow-color プロパティ

6.2. 影のオフセット: box-shadow-offset プロパティ

6.3. シャドウのぼかし: box-shadow-blur プロパティ

6.4. シャドウの広がり: box-shadow-spread プロパティ

6.5. シャドウの配置: box-shadow-position プロパティ

6.6. ドロップシャドウのショートハンド: box-shadow プロパティ

6.6.1. 影の形状、スプレッド、およびノックアウト

6.6.2. シャドウのエッジのぼかし

6.7. レイヤリング、レイアウト、およびその他の詳細

7. ボーダー形状

7.1. border-shape プロパティ

プライバシーに関する考慮事項

セキュリティに関する考慮事項

変更点

2025年7月22日の 最初の公開作業草案 以降の変更

[CSS3BG] 以降の追加

謝辞

適合性

文書の規約

適合クラス

部分的実装

不安定または独自拡張機能の実装

非実験的実装

索引

本仕様で定義された用語

参照により定義された用語

参考文献

規範的参考文献

情報的参考文献

プロパティ索引

問題索引

CSS のボーダーおよびボックス装飾モジュールレベル 4

3.5. 角サイズ: border---radiusプロパティ

2025年7月22日の最初の公開作業草案以降の変更