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

1. はじめに

この仕様は、CSS Backgrounds and Borders Module Level 3 [CSS3BG] の境界線およびボックス装飾に関する部分を拡張します。 現在は差分仕様となっており、 境界線およびボックス装飾に関するその他の機能については [CSS3BG] を参照してください。

追加された corner-*-shape および border-shape プロパティや、 border-*-radius、box-shadow-* のロングハンドに対する論理ショートハンド、 border-limit および border-*-clip プロパティによる部分的な境界線について規定します。

Level 3 のテキストをこのドラフトに統合してください。

2. 境界線

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

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

これらのプロパティは、border-style プロパティで指定された境界線の前景色を設定します。

<image-1D> で定義されるストライプは、対象となる側の境界線の形状に従い、 padding edge から外側へ向かって帯状に描画されます。 各ポイントでの境界線幅が、そのポイントにおけるストライプの total width を定義します。

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

border-color は4つの 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 に依存します。

これら2つのショートハンドプロパティは、border-block-start-color・border-block-end-color および border-inline-start-color・border-inline-end-color をそれぞれ設定します。 1つ目の値がstart 側の色、 2つ目の値がend 側の色を表します。 1つだけ指定した場合、start と end の両側に適用されます。

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

フロー相対 プロパティ border-block-start-style、border-block-end-style、border-inline-start-style、 border-inline-end-style は、物理的プロパティ border-top-style、border-bottom-style、border-left-style、 border-right-style に対応します。 このマッピングは、要素の writing-mode、direction、text-orientation に依存します。

これら2つのショートハンドプロパティは、border-block-start-style・border-block-end-style および border-inline-start-style・border-inline-end-style をそれぞれ設定します。 1つ目の値がstart 側のスタイル、 2つ目の値がend 側のスタイルを表します。 1つだけ指定した場合、start と end の両側に適用されます。

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

フロー相対プロパティ border-block-start-width、border-block-end-width、border-inline-start-width、 border-inline-end-width は、物理プロパティ border-top-width、border-bottom-width、border-left-width、 border-right-width に対応します。 このマッピングは、要素の writing-mode、direction、text-orientation に依存します。

これら2つのショートハンドプロパティは、border-block-start-width・border-block-end-width および border-inline-start-width・border-inline-end-width をそれぞれ設定します。 1つ目の値がstart側の幅、 2つ目の値がend側の幅です。 1つだけ指定した場合、start と end 両側に適用されます。

2.4. 境界線ショートハンドプロパティ

フロー相対プロパティ 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 に依存します。

これら2つのショートハンドプロパティは、border-block-start・border-block-end または border-inline-start・border-inline-end を同じスタイルに設定します。

3. 角

3.1. 角のサイズ指定：border-*-*-radius プロパティ

フロー相対プロパティ 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 がブロック軸側、 2番目がインライン軸側を意味します （つまり 'border-block-inline-radius' のパターン）。

3.2. 角のサイズ指定ショートハンド：border-radius および border-*-radius ショートハンドプロパティ

3.2.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 ショートハンド

border-*-radius ショートハンドは、関連する側の2つの border-*-*-radius ロングハンドプロパティを設定します。スラッシュの前後に値が指定されている場合、スラッシュの前は水平半径、スラッシュの後は垂直半径を設定します。 スラッシュがない場合は、両方の半径に同じ値を設定します。 半径の2つの値は、 border-top-radius では左上・右上、 border-right-radius では右上・右下、 border-bottom-radius では左下・右下、 border-left-radius では左上・左下、 border-block-start-radius では start-start・start-end、 border-block-end-radius では end-start・end-end、 border-inline-start-radius では start-start・end-start、 border-inline-end-radius では start-end・end-end の順で指定します。 2番目の値が省略された場合は、1番目の値がコピーされます。

3.2.2. すべての角を一度に指定： border-radius ショートハンド

[CSS3BG] を参照。

3.3. 角の形状指定：corner-shape プロパティ

デフォルトでは、0以外の border-radius の値は、 対象の角を丸める四分の一楕円の 角形状 を定義し、 その角の border-radius で定義される コーナー領域 を埋めます。 しかし場合によっては、他の 角形状 が求められることもあります。 corner-shape プロパティ（およびそのロングハンド）は、 ボックスが border-radius の値で定義される領域に対して使う 角形状 を正確に指定します。

さまざまな 角形状 は、 すべて スーパー楕円 の異なるパラメータとして表現できます。 スーパー楕円は楕円を一般化したもので、 パラメータ `k` を変えることで、正方形・楕円・ノッチの間のすべての形状を表現できます。

完全な表現と補間を可能にするため、 corner-shape プロパティ群はスーパー楕円のパラメータを superellipse() 関数で直接指定したり、 よく使われるパラメータを表すキーワードでも指定できます。 詳細は <corner-shape-value> 定義を参照してください。

3.3.1. corner-shape ショートハンド

corner-shape プロパティは、 border-radius で指定された領域内におけるボックスの角の形状を指定します。

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

round

角形状 は凸な楕円の4分の1です。 superellipse(1) と同等です。

注: これは corner-shape プロパティの初期値であり、 corner-shape が導入される前の border-radius の挙動と同じです。

squircle

角形状 は「スクイークル」の4分の1であり、 round と square の中間の凸曲線です。 superellipse(2) と同等です。

square

角形状 は凸な90度の角です。 superellipse(infinity) と同等です。

注: これは border-radius: 0 で得られる「通常」の直角コーナーと見た目は同じですが、 corner-shape の他の値とのアニメーションが滑らかに行えます。

bevel

角形状 は直線の対角線であり、凸でも凹でもありません。 superellipse(0) と同等です。

scoop

角形状 は凹な四分の一楕円です。 superellipse(-1) と同等です。

notch

角形状 は凹な90度の角です。 superellipse(-infinity) と同等です。

superellipse(K)

角形状 はスーパー楕円の4分の1です。 引数 K は スーパー楕円パラメータ であり、 指数 2^K を用いてスーパー楕円を定義します。

§ 3.3 角の形状指定：corner-shape プロパティ の注で スーパー楕円の数学的定義やKの意味を解説しています。 § 3.3.3 角の形状のレンダリング でスーパー楕円の計算と描画の詳細を参照してください。

注: 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.3.2. 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 などのショートハンドは、関連する側の2つの corner-*-*-shape プロパティを設定します。 1つのみ値を指定した場合、2番目の値は同じ値になります。

物理ショートハンド（corner-top-shape など）では、 値は左右または上下の順（プロパティに応じて）です。 つまり、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.3.3. corner-shape のレンダリング

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

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

要素 element の 外側輪郭 は、border contour path であり、 element とその border edge から得られます。

要素 element の 内側輪郭 は、border contour path であり、 element とその padding edge から得られます。

要素 の border は、その 外側輪郭 と 内側輪郭 の間の領域に描画されます。

要素 の outline は、外側輪郭 に沿って used outline-width および outline-offset で描画されます。 その具体的な描画方法は実装依存です。

要素 の overflow 領域は、 内側輪郭 によって形作られます。 要素 の overflow clip edge は、border contour path（ element、element の padding edge、 および element の used overflow-clip-margin を使う）によって形状が決まります。

要素 の 'box shadow' の各シャドウは、 border contour path （element、element の border edge、 シャドウの used box-shadow-spread）によって形状が決まります。

3.3.4. 対向する半径の制約

凹型の corner-shape 値（superellipse parameter が負）がある場合、対角の角同士が重なってしまうことがあります。

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

これを防ぐため、4つの半径は重なりを防ぐよう制約されます。 これは、対向する角それぞれについて hull ポリゴンを計算し、両方の角に適用したときポリゴンが交差しなくなる最大の縮小率を求めて実現します。

3.3.5. 角形状の補間

<corner-shape-value> は常に superellipse() と superellipse パラメータ 変数で表現できるため、2つの <corner-shape-value> を補間する場合は superellipse パラメータ 自体を補間します。 log2 を使うため、直線的補間だと凹型コーナーの補間速度が凸型コーナーよりかなり速くなってしまいます。 それを調整するために、superellipse 補間 の式は、superellipse パラメータ を 0～1 の値に変換する方法とその逆を示します。

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

3.4. 角形状ショートハンド：corners プロパティ

このプロパティの正確な名前と構文を決定すること。[Issue #11623]

4. 部分的な境界線

CSS の境界線は伝統的に全体のボーダーエッジを覆います。ただし、時には境界線の一部を非表示にすることが有用な場合もあります。

これを行うための2つの提案があります： 2つめは GCPM から、1つめはより分かりやすく再構成した案です。 名前はひどいもので、既知の課題であり、提案を歓迎します。 これをクリッピングとして考えると問題があります： 点線ボーダーの場合、常に完全な点を描画したいので点の一部だけ描画しては困ります。 したがってクリップではなく描画制限であるべきです。

4.1. 部分的な境界線：border-limit プロパティ

デフォルトでは境界線全体が描画されます。ただしボーダーの描画を一部だけに制限することもできます。キーワードでどの部分かを指定し、長さや割合でどれくらいかを指定します。

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 と同じ。

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

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

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

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

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

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

4.2. border-clip プロパティ

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

border-clip は4つの個別プロパティのショートハンドです。

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

リストされた部分がボーダーより長い場合、指定された部分が終わるまで全て表示されます。このとき柔軟長さは全て0になります。

水平ボーダーでは左から右、垂直ボーダーでは上から下の順に部分を並べます。

実際の分割は、すべての柔軟長さを0としてボーダー部分をレイアウトし、残りを柔軟長さに比例配分します。

border-clip: 10px 1fr 10px;

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

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

border: thin solid black;
border-clip: 0 1fr; /* 境界線を非表示に */
border-clip-top: 10px 1fr 10px; /* 特定のボーダーだけ表示 */
border-clip-bottom: 10px 1fr 10px;

border-top: thin solid black;
border-bottom: thin solid black;
border-clip-top: 10px;
border-clip-bottom: 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-clip-top: 40px 20px 0 1fr 20px 20px 0 1fr 40px;

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

5. ドロップシャドウ

5.1. シャドウの色指定：box-shadow-color プロパティ

box-shadow-color プロパティは一つ以上のドロップシャドウの色を定義します。 プロパティにはカンマ区切りのシャドウ色リストを指定できます。

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

5.2. シャドウのオフセット：box-shadow-offset プロパティ

box-shadow-offset プロパティは一つ以上のドロップシャドウのオフセットを定義します。 プロパティにはカンマ区切りのリストを指定できます。 その各項目は none（シャドウなし）か、横・縦のオフセットペア（両方とも <length> 値）を指定します。

none

シャドウは描画されません。 このシャドウに対応する他の box-shadow プロパティ値は効果を持ちません。

1st <length>

シャドウの横方向のオフセットを指定します。 正の値はボックスの右側、負の値は左側にシャドウを描画します。

2nd <length>

シャドウの縦方向のオフセットを指定します。 正の値は下方向、負の値は上方向にシャドウをずらします。

「レイヤー化・レイアウト・その他の詳細」の章で box-shadow-offset が 他のカンマ区切りのドロップシャドウプロパティとどのように連携してドロップシャドウレイヤーを構成するか説明しています。

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

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

負の値は無効です。 ぼかし値が 0 の場合、シャドウの縁は鋭くなります。 値が大きいほどシャドウの縁がよりぼやけます。 詳細はShadow Blurring参照。

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

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

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

正の値はシャドウを指定半径分だけ全方向に拡大します。 負の値はシャドウを収縮させます。 詳細はShadow Shape参照。

注：インナーシャドウの場合、シャドウを拡張（シャドウ領域を広げる）することはシャドウの輪郭形状を縮小することを意味します。

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

5.5. シャドウの位置指定：box-shadow-position プロパティ

box-shadow-position プロパティは一つ以上のドロップシャドウの位置を定義します。 プロパティにはカンマ区切りの outset と inset キーワードのリストを指定できます。

outset

ドロップシャドウを外側 box-shadowにします。 つまり、ボックスがキャンバス上に浮かんでいるかのようにキャンバス上に影を落とします。

inset

ドロップシャドウを内側 box-shadowにします。 つまり、キャンバスがボックスに切り抜かれて背後にずらされたかのように、ボックスの中に影を落とします。

「レイヤー化・レイアウト・その他の詳細」の章で box-shadow-position が 他のカンマ区切りのドロップシャドウプロパティとどのように連携してドロップシャドウレイヤーを構成するか説明しています。

5.6. ドロップシャドウショートハンド：box-shadow プロパティ

box-shadow プロパティはボックスに一つ以上のドロップシャドウを付与します。 プロパティにはカンマ区切りのシャドウリストを（前面から背面の順で）指定します。

各シャドウは <spread-shadow> で指定し、 box-shadow-offset と、必要に応じて box-shadow-blur、 box-shadow-spread、 box-shadow-color、 box-shadow-position を指定します。 長さを省略した場合は 0、色を省略した場合はオフセットが none の場合は transparent、 それ以外の場合は currentcolor となります。

<spread-shadow> = <'box-shadow-color'>? && [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?

5.7. レイヤー・レイアウトその他詳細

ドロップシャドウは box-shadow-* プロパティから構成されるcoordinated value list で宣言されます。 これは coordinating list property group を形成し、 box-shadow-offset が coordinating list base property となります。 CSS Values 4 § A Coordinating List-Valued Properties 参照。

シャドウ効果は前面から背面に適用されます： 最初のシャドウが最前面、その後ろに他のシャドウが重なります。 シャドウはレイアウトに影響せず、他のボックスやテキスト、またはそれらのシャドウと重なったり重ねられたりします。 スタッキングコンテキストと描画順の観点では、 要素の外側 box-shadowはその要素の背景の直下に描画され、 内側シャドウは背景の直上（ボーダーやボーダーイメージの下、もしあれば）に描画されます。

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

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

外側シャドウは、collapseボーダーモデルにおける内部テーブル要素には影響しません。 collapseボーダーモデルで単一のボーダーエッジに対してシャドウが定義されており、 そのエッジが複数のボーダー太さを持つ場合 （例：ある行だけボーダーが太いテーブル、または rowspanning セルが他のセルと異なるボーダー太さを持つ場合）、 シャドウの正確な位置と描画は未定義です。

6. 境界線の形状指定

corner-shape や border-radius は境界線の装飾性をある程度表現できますが、 いずれもボーダーが矩形であるという前提で動作します。

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

6.1. border-shape プロパティ

border-shape プロパティは、単一の <basic-shape> または2つの <basic-shape> を指定でき、それぞれ1つまたは2つのパスを生成します。 単一パスのボーダーシェイプバリアントは、 要素の既存の border プロパティを使って、指定した <basic-shape> が解決するパスに線を描きます。 二重パスのボーダーシェイプバリアントは、その2つのパス間の領域をボーダー領域として塗りつぶします。

border-shape プロパティは border-radius や corner-shape と互換性がありません。 要素の 算出値で border-shape が none でない場合、 border-radius は無視され、0 として扱われます。corner-shape も暗黙的に無視されます（これは border-radius と組み合わせてのみ機能します）。

box-shadow は内側・外側両方のボーダーパスに従います。

border-shape はジオメトリやレイアウトには影響せず、 既存のborder-width プロパティで計算されます。

border-shape はボックス内の内容のフローには影響しません。 注：作者は border-shape と shape-inside を組み合わせて、ボックスの装飾とテキストの流れ制御を同時に行うことも可能です。

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

置換要素のクリップにどう影響するか？

塗りの色・ストロークの色・ストローク幅は、それぞれ border-color および border-width プロパティから取得されます。

これを詳述すること。上書き可能にすべき？

border-style についてはどうするか？任意の形状にはそのまま適用できない。

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

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

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

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

変更点

[CSS3BG] 以降の追加

• <image-1D> を border-color とそのロングハンドの値として追加

• 物理および論理の border-*-radius ショートハンドを追加

• corner-shape および corner-*-shape ショートハンドと、それに関連する corners ショートハンドを追加

• border-shape を追加

• 部分的なボーダー を border-limit および border-*-clip プロパティで追加

• box-shadow-* のロングハンドを追加し、box-shadow をショートハンドに変更

• 論理ボーダーのプロパティを [CSS-LOGICAL-1] から本仕様へ移動

謝辞

このモジュールの先行仕様である [CSS1]、[CSS21]、 および [CSS3BG] に多大な貢献をされた方々に加え、 編集者は特に本 Level 4 に対する提案やフィードバックをいただいた Tab Atkins、 Noam Rosenthal、 Håkon Wium Lie、 Oriol Brufau の各氏に感謝します。