CSS Borders and Box Decorations Module Level 4

1.1. ~module間の相互作用

この仕様は、 `CSS3BG$r の~borderと~box装飾に関係する各部を拡張すると伴に， 次に挙げるものも供する： ◎ This specification extends the parts related to borders and box decorations of CSS Backgrounds and Borders Module Level 3 [CSS3BG]. ◎ It provides＼

• 追加された各種［ `corner-*-shape$p, `border-shape$p ］~prop用の仕様 ◎ specifications for the added corner-*-shape and border-shape properties,＼
• 各種［ `border-*-radius$p, `box-shadow-*$p ］下位prop用の論理-`略式~prop$ ◎ as well as logical shorthands for border-*-radius, box-shadow-* longhands,＼
• ［ `border-limit$p, `border-*-clip$p ］~prop介した部分的な~border ◎ and partial borders via the border-limit and border-*-clip properties.

この~moduleにおけるすべての~propは、 `first-letter$pe 疑似要素 `CSS2$r にも適用される。 ◎ All properties in this module apply to the ::first-letter pseudo-element.＼

1.2. 値~定義

【 この節の他の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$ に移譲。 】

…これらの値~型の定義は、 他の~CSS~moduleとの組合nで拡張され得る。 例えば， `CSS-IMAGES-3$r と組合せることで、 `background-image$p や `border-image$p の値として，~CSS~gradientを利用することも許容される。 ◎ … Combination with other CSS modules may expand the definitions of these value types. For example, combining with CSS Images allows for using CSS gradients as background-image or border-image values. [CSS-IMAGES-3]

【この訳に特有な表記規約】

“`example-property-*^p” や “`example-*-property^p” などの `*^c の入った表記は、［ 略式~prop `example-property^p, その下位~propたち ］の総称を表す。

2.1. 線の色： `border-*-color^p ~prop

これらの~propは、 `~border色@ — 各種 `border-*-style$p ~propにより指定された~borderの前景~色 — を設定する。 ◎ These properties set the foreground color of the border specified by the border-style properties.

これらのうち名前に［ `start^css ／ `end^css ］を伴うものは`~flow相対$な~propであり， 他は`物理的$な~propである。 前者と後者の対応付けは、 当の要素の［ `writing-mode$p, `direction$p, `text-orientation$p ］に依存する。 ◎ ↓

その値の構文は：

`line-color@t
	= `color$t
	| `image-1D$t

【 この生成規則 `line-color$t は、 他所を集約するための，この訳による追加。 】

`image-1D$t により定義される縞は、［ 当の~propが適用される側における~borderの形状 ］が成す帯において［ `~padding辺$から開始して外方へ進捗する ］よう描かれる。 辺~上の各~点における~border幅が当の点における縞の %総~幅 【 `image-1D$t を見よ】を定義する。 ◎ The stripes defined by <image-1D> follow the shape of the border on the side to which they apply, and are drawn in bands starting from the padding edge and progressing outwards. The border width at each point defines the total width of the stripes at that point.

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

`border-color$p は、 4 個の物理的な `border-*-color^p ~prop用の`略式~prop$である — 所与の値たちが成す~listは、 これら各~側の下位propを`時計回りに設定する$。 ◎ border-color is a shorthand property for the four physical border-*-color properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. This is resolved individually for each list item. ◎ ↑ The flow-relative properties border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color correspond to the physical properties border-top-color, border-bottom-color, border-left-color, and border-right-color. The mapping depends on the element’s writing-mode, direction, and text-orientation.

どちらも、 2 個の値は，順に［ `始端$, `終端$ ］側の色を表現する — 値が 1 個だけ与えられた場合、 それが終端~側にも適用される。 ◎ The first value represents the start side color, and the second value represents the end side color. If only one value is given, it applies to both the start and end sides.

2.2. 線の~pattern： `border-*-style^p ~prop

これらの~propは、［ `~border$が現れるかどうか ］および［ 現れる（かつ`~border画像＠#border-images$で上書きされない）場合は， どの `~border~style@ で描かれるか ］を制御する。 ◎ These properties control whether a border appears, and if it does what style it’s drawn in (if it is not overridden by a border image).

これらのうち名前に［ `start^css ／ `end^css ］を伴うものは`~flow相対$な~propであり， 他は`物理的$な~propである。 前者と後者の対応付けは、 当の要素の［ `writing-mode$p, `direction$p, `text-orientation$p ］に依存する。 ◎ The flow-relative properties border-block-start-style, border-block-end-style, border-inline-start-style, and border-inline-end-style correspond to the physical properties border-top-style, border-bottom-style, border-left-style, and border-right-style. The mapping depends on the element’s writing-mode, direction, and text-orientation.

どちらも、 2 個の値は，順に［ `始端$, `終端$ ］側の~styleを表現する — 値が 1 個だけ与えられた場合、 それが終端~側にも適用される。 ◎ The first value represents the start side style, and the second value represents the end side style. If only one value is given, it applies to both the start and end sides.

`border-style$p は、 4 個の物理的 `border-*-style^p ~prop用の`略式~prop$である。 所与の値たちが成す~listは、 これら各~側の下位propを`時計回りに設定する$。 ◎ border-style is a shorthand property for the four physical border-*-style properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. This is resolved individually for each list item.

その値の構文は： ◎ The style is specified as a <line-style> keyword, where

`line-style@t
	= `none$v
	| `hidden$v
	| `dotted$v
	| `dashed$v
	| `solid$v
	| `double$v
	| `groove$v
	| `ridge$v
	| `inset$v
	| `outset$v

各種 値の意味は： ◎ Values have the following meanings:

`none@v

~borderは無い。 ~borderの`色$bDと`幅$bDは無視される （すなわち，~borderの`幅$bDは 0 になる）。 その結果、［ `border-image-width$p の初期~値も 0 に解決される ］ようになることに注意。 ◎ No border. Color and width are ignored (i.e., the border has width 0). Note this means that the initial value of border-image-width will also resolve to zero.

`hidden@v

`none$v と同じ — ただし、 `border-collapse$p が `collapse^v にされた~table `CSS2$r に対しては，`~borderの競合-解決$の規則における挙動が異なる。 ◎ Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables [CSS2].

`dotted@v

点線 — 小丸の並び。 ◎ A series of round dots.

`dashed@v

端が角ばった破線。 ◎ A series of square-ended dashes.

`solid@v

一重の実線。 ◎ A single line segment.

`double@v

二重線。 各~線の太さは指定されないが、 全体的な太さは `border-width$p に等しくなるモノトスル。 ◎ Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal border-width.)

`groove@v

~canvasに彫られたかのような見かけ （この効果は、 概して，指定された `border-color$p より少し［ 明るい線, 暗い線 ］で “影” を形成することにより達成される）。 ◎ Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the specified border-color.)

`ridge@v

~canvasから盛り上げられたかのような見かけ。 ◎ Looks as if it were coming out of the canvas.

`inset@v

~borderの内側が~canvasから沈降したかのような見かけ。 `~borderの縮約~model$ `CSS2$r においては `ridge$v として扱われる。 ◎ Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model. [CSS2]

`outset@v

~borderの内側が~canvasから隆起したかのような見かけ。 `~borderの縮約~model$ `CSS2$r においては `groove$v として扱われる。 ◎ Looks as if the content on the inside of the border is raised out of the canvas. Treated as groove in the collapsing border model. [CSS2]

【 ［ `groove^v ／ `ridge^v ／ `inset^v ／ `outset^v ］の見かけは、 背景や~borderの色によっては真逆に見えるかもしれない。 】

~borderは、 要素の背景の手前に描かれるが，（重合する所では）要素の内容の背後に描かれる。 ◎ Borders are drawn in front of the element’s background, but behind the element’s content (in case it overlaps).

注記： 黒や白に近い~border色は、［ `groove$v ／ `ridge$v ／ `inset$v ／ `outset$v ］に要求される “立体” 効果を作成するためには，中間~色とは異なる色の計算が必要になる。 ◎ Note: Border colors close to black or white may need different color calculations than colors in between in order to create the required “3D” effect of groove, ridge, inset, or outset.

注記： ［ 点線を成す小丸の間隔 ］や［ 破線を成す各~線分の間隔や長さ ］を制御するすべは無い。 実装には、 隅の所で対称になるよう間隔を選ぶことが奨励される。 ◎ Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.

2.3. 線の太さ： `border-*-width^p ~prop

これらの~propは、 `~border幅@ — `~border$の【当の~propに対応する側の】太さ — を指定する。 その構文は： ◎ These properties specify the thickness of the border, i.e. the border width. Where

`line-width@t
	= `length [0,∞]$t
	| `hairline$v
	| `thin$v
	| `medium$v
	| `thick$v

負な値は妥当でない。 ~keyword［ `thin@v は `1px^v ／ `medium@v は `3px^v ／ `thick@v は `5px^v ］と等価になるとする。 ~keyword `hairline@v は、 ~UA定義な `1px^v 以下の長さであり， 既定の~page~zoomにおける機器~画素の整数倍に等しい “ちょうど可視になる” 線を表現する （その大きさは， `1px^v ほどにもなり得るが、 多くの機器では，およそ `0.3px^v 〜 `0.5px^v になる）。 ◎ Negative values are invalid. The thin, medium, and thick keywords are equivalent to 1px, 3px, and 5px, respectively. The hairline keyword is a UA-defined length, less than or equal to 1px and equal to an integer number of device pixels at the default page zoom, which represents a "just visible" line. (While it can be as large as 1px, on many devices it will be approximately 0.3px to 0.5px.)

これらの~propの：

• `解決d値$は、 その`使用~値$になる。 ◎ The resolved value for the border-width properties is the used value.
• `使用~値$は、 対応する `border-*-style$p ~propが［ `none$v ／ `hidden$v ］を値にとる場合には `0^v になる。 ◎ If the border-style corresponding to a given border-width is none or hidden, then the used width is 0.

これらの~propのうち名前に［ `start^css ／ `end^css ］を伴うものは`~flow相対$な~propであり， 他は`物理的$な~propである。 前者と後者の対応付けは、 当の要素の［ `writing-mode$p, `direction$p, `text-orientation$p ］に依存する。 ◎ The flow-relative properties border-block-start-width, border-block-end-width, border-inline-start-width, and border-inline-end-width correspond to the physical properties border-top-width, border-bottom-width, border-left-width, and border-right-width. The mapping depends on the element’s writing-mode, direction, and text-orientation.

どちらも、 2 個の値は，順に［ `始端$, `終端$ ］側の幅を表現する — 値が 1 個だけ与えられた場合、 それが終端~側にも適用される。 ◎ The first value represents the start side width, and the second value represents the end side width. If only one value is given, it applies to both the start and end sides.

`border-width$p は、 4 個の物理的 `border-*-width^p ~prop用の`略式~prop$である。 所与の値たちが成す~listは、 これら各~側の下位propを`時計回りに設定する$。 ◎ border-width is a shorthand property for the four physical border-*-width properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. This is resolved individually for each list item.

注記： `~border幅$の`初期~値$は `medium$v であるが、 【他が指定されない限り】その`使用~値$【！used initial width】は，`~border~style$の初期~値が `none$v なので `0^v になる。 ◎ Note: Although the initial width is medium, the initial style is none; therefore the used initial width is 0.

2.4. ~borderの略式~prop

【 原文は `line-color$t を `color$t として指定しているが、 各種 `border-*-color$p と一貫するためには， `line-color^t にする必要があろう。 】

これらの~propは、 ~boxの`~border$を成す ある側を成す［ `border-*-width$p, `border-*-color$p, `border-*-style$p ］を設定する`略式~prop$である。 値が省略された~propは、 各自の`初期~値$に設定される。 ◎ These shorthand properties set the border-width, border-color, and border-style of one side of the borders of a box. Omitted values are set to their initial values.

これらのうち名前に［ `start^css ／ `end^css ］を伴うものは`~flow相対$な~propであり， 他は`物理的$な~propである。 前者と後者の対応付けは、 当の要素の［ `writing-mode$p, `direction$p, `text-orientation$p ］に依存する。 ◎ The flow-relative properties border-block-start, border-block-end, border-inline-start, and border-inline-end correspond to the physical properties border-top, border-bottom, border-left, and border-right. The mapping depends on the element’s writing-mode, direction, and text-orientation.

【 原文は `line-color$t を `color$t として指定しているが、 各種 `border-*-color$p と一貫するためには， `line-color^t にする必要があろう。 】

`border$p ~propは、 ~boxの［ 上端, 右端, 下端, 左端 ］`~border$を すべて同じ［ `border-width$p, `border-color$p, `border-style$p ］に設定するための`略式~prop$である。 略式~prop［ `margin$p, `padding$p ］と違って、 `border$p ~propは、 これら各側の~borderに異なる値を設定できない — そのためには、 他の `border-*^p ~propを利用する必要がある。 ◎ The border property is a shorthand property for setting the same border-width, border-color, and border-style for all four borders of a box. Unlike the shorthand margin and padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

`border$p 略式~propは、 `border-image$p も，その初期~値に設定し直す。 作者には、 より前に現れている【~cascadeにおいて より優先される】~border設定群を上書きする際には，［ 他の略式~propや個々の~propではなく，この略式~prop ］を利用することが推奨される。 これは、［ 新たな~styleの効果が~~発揮されるよう `border-image$p も設定し直す ］ことを確保する。 ◎ The border shorthand also resets border-image to its initial value. It is therefore recommended that authors use the border shorthand, rather than other shorthands or the individual properties, to override any border settings earlier in the cascade. This will ensure that border-image has also been reset to allow the new styles to take effect.

注記： ~CSS~WGは、 ~CSSの将来~levelにおいても，［ `border$p 略式~propは， 他のすべての `border-*^p ~propを設定し直す ］ものと意図している。 仮に，~glyphによる~borderを許容する `border-characters^p ~propが導入されたなら、 `border$p 略式~propは，それも設定し直すことになる。 作者は， `border$p 略式~propを利用して~borderを設定し直すことにより、 将来にどの~propが導入されようが， “白紙状態” に戻されることが保証される。 ◎ Note: The CSS Working Group intends for the border shorthand to reset all border properties in future levels of CSS as well. For example, if a border-characters property is introduced in the future to allow glyphs as borders, it will also be reset by the border shorthand. By using the border shorthand to reset borders, authors can be guaranteed a “blank canvas” no matter what properties are introduced in the future.

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

これらの~propは，機能性が重合している部分があるので、 規則を指定する順序も重要になる。 ◎ Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important.

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

3.1. 隅における切取n法

`border-radius$p は，`~border画像$【！#border-image】には影響しないが、 塗ngや~eventの取扱いを［ `~border辺$／`~padding辺$／`内容~辺$ ］で切取るような他の効果は，当の辺に対応する曲線で切取るモノトスル。 例えば： ◎ Although border images are not affected by border-radius, other effects that clip painting or event handling to the border, padding, or content edge must clip to their respective curves. For example,＼

• 背景は、 `background-clip$p により指定された曲線で切取る。 ◎ backgrounds clip to the curve specified by background-clip,＼
• `overflow$p に対する `visible＠~CSSOVERFLOW3#valdef-overflow-visible$v 以外の値は （ `overflow^p が両~軸とも `visible^v でないときは）、 曲った`~padding辺$で切取る。 ◎ overflow values other than visible to the curved padding edge (when overflow on both axes is not visible),＼
• `置換され$る要素の内容は、 曲った`内容~辺$で切取る。 ◎ replaced element content to the curved content edge,＼
• ~pointer~eventは、 曲った`~border辺$で切取る。 ◎ pointer events to the curved border edge, etc.

注記： `border-radius$p は，要素とヤリトリありな面積を削減するので、 作者は，残りの面積が［ ~targetにする~platformに推奨される下限 ］に適合することを~~確保するべきである。 特に， `border-radius$p を利用するときは、 推奨される最小な~touch~target~sizeに適合するために，より大きい［ 横幅／縦幅 ］が要求され得る。 ◎ Note: As border-radius reduces the interactive area of an element authors should make sure the remaining interactive area conforms to recommended minima for the platforms they target; in particular, conforming to recommended minimum touch target sizes may require larger widths and heights when border-radius is used.

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

3.2. ~borderの色と~styleの遷移

~borderにおいて［ `色$bD／`~style$bD ］が遷移する区間は、［ ~borderの両~半径, および内縁~曲線の中心 ］を包含する，最~小な矩形に入るモノトスル （いずれかの~border半径が対応する`~border幅$以下になる場合、 内縁な曲線は直角になり，中心は`~padding辺$の隅に来る）。 ◎ Color and style transitions must be contained within the segment of the border that intersects the smallest rectangle that contains both border radii as well as the center of the inner curve (which may be a point representing the corner of the padding edge, if the border radii are smaller than the border width).

隅で出会う~borderのうち一方の`幅$bDが 0 の場合、 他方の~borderが遷移区間の全体を占める。 他の場合、 これら連接している~borderの合間における［ `色$bD／`~style$bD ］に対する遷移の中点は，［ 連続的かつ単調な［ ２つの `border-*-width$p の比率 ］の関数 ］から得られる，曲線~上の一点に来る。 しかしながら、［ これらの遷移の外見／ この比率から曲線~上の点に対応付ける関数 ］は，定義されない。 ◎ If one of these borders is zero-width, then the other border takes up the entire transitional area. Otherwise, the center of color and style transitions between adjoining borders is a point along the curve that is a continuous monotonic function of the ratio of the border widths. However it is not defined what these transitions look like or what function maps from this ratio to a point on the curve.

3.3. 曲線が重合する場合

ある辺を挟んで隣接な 2 つの隅における~border半径の和が`~border~box$の~sizeを超過するとき、 それらの隅の曲線は重合することになる。 ~UAは、 そうならないよう， すべての隅における~border半径の使用~値を［ 隅の曲線が重合しなくなる所まで，同じ倍率で削減する ］モノトスル。 そうするための~algoは： ◎ Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap. The algorithm for reducing radii is as follows:

注記： この公式は、 四分~円を四分~円のままに保ち，各~隅の半径どうしの~~大小関係も保つが、 すでに十分~小さい半径も削減させ得るので， 同じ外見が保たれるべき~border【！？of nearby elements 】の外見も変え得る。 ◎ Note: This formula ensures that quarter circles remain quarter circles and large radii remain larger than smaller ones, but it may reduce corners that were already small enough, which may make borders of nearby elements that should look the same look different.

曲線が~scrollbarなどの~UI要素に干渉する場合、 ~UAは更に，影響される隅の半径に限り，その使用~値を必要な分だけ削減してもヨイ。 ◎ If the curve interferes with UI elements such as scrollbars, the UA may further reduce the used value of the affected border radii (and only the affected border radii) as much as necessary, but no more.

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

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

3.4. ~tableに対する効果

~tableにおいては、 その `border-collapse$p に応じて： ◎ ↓

• `separate^v （~borderが分離される~mode）の場合 ⇒ `border-*-radius$p ~propは、［ `table＠~CSSDISP#valdef-display-table$v ／ `inline-table＠~CSSDISP#valdef-display-inline-table$v ／ `table-cell＠~CSSDISP#valdef-display-table-cell$v ］~boxにも適用される。 ◎ The border-radius properties do apply to table, inline-table, and table-cell boxes in separated borders mode (border-collapse: separate).＼
• `collapse^v の場合 ⇒ `border-*-radius$p ~propの効果は無い。 ◎ When border-collapse is collapse, they have no effect.

3.5. 隅の~sizing： `border-*-*-radius^p ~prop

半径は、 `border-radius$t 値として指定される： ◎ The radius is specified as a <border-radius> value, where

`border-radius@t
	= `slash-separated-border-radius-syntax$t
	| `legacy-border-radius-syntax$t
`slash-separated-border-radius-syntax@t
	= `length-percentage$t [ / `length-percentage$t ]?
`legacy-border-radius-syntax@t
	= `length-percentage$t{1,2}

これら各~propの値を成す 2 個の `length-percentage$t は、 `~border半径@ — 順に，四分~楕円の［ 横, 縦 ］半径 — を定義することにより， `~border辺$の外縁の隅~形状（下の図式を見よ）を定義する。 2 個目の値が省略された場合、 1 個目の値から複製される。 どちらかの長さが 0 の場合、 隅は丸められず，直角になる。 ［ 横／縦 ］半径に対する百分率は，`~border~box$の［ 横幅／縦幅 ］に相対的になる。 ◎ The two <length-percentage> values of the border-*-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.＼

注記： 新たな内容~用には、 ~slash構文（ `slash-separated-border-radius-syntax$t ）が選好される。 作者は，それを利用する`べき^emであるが、 後方-互換性を得るため， 旧来の構文（ 2 個の値は空白で分離される）も~supportされる。 ◎ Note: Authors should use the slash syntax, which is preferred for new content, but the legacy syntax (two values separated by whitespace) is supported for backwards compatibility.

負な値は妥当でない。 ◎ Negative values are invalid.

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

これらのうち名前に［ `start^css ／ `end^css ］を伴うものは`~flow相対$な~propであり， 他は`物理的$な~propである。 前者と後者の対応付けは、 当の要素の［ `writing-mode$p, `direction$p, `text-orientation$p ］に依存する — 各~flow相対な~prop名を成す［ `start^css ／ `end^css ］のうち［ 1 個目は塊-軸, 2 個目は行内-軸 ］の［ 始端／終端 ］側を表すことに基づいて。 ◎ The flow-relative properties border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius correspond to the physical properties border-top-left-radius, border-bottom-left-radius, border-top-right-radius, and border-bottom-right-radius. The mapping depends on the element’s writing-mode, direction, and text-orientation, with the first start/end giving the block axis side, and the second the inline-axis side (i.e. patterned as 'border-block-inline-radius').

3.6. 隅の~sizing略式： `border-radius^p, `border-*-radius^p 略式~prop

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

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^p ~prop

既定では、 `border-radius$p 用の 0 以外の値は， 影響される隅を丸める四分~楕円が成す `隅~図形@ を定義する — `border-radius$p により当の隅~用に定義される `隅~区画@ を埋めるよう。 しかしながら， 一部の事例では、 他の`隅~図形$が欲される。 各種 `corner-*-shape$p ~prop（および，それらの略式~prop）は、 ~boxが［ `border-*-radius$p 値により定義される領域 ］用に［ 正確にどの`隅~図形$を利用することになるか ］を指定する。 ◎ By default, non-zero border-radius values define a quarter-ellipse corner shape that rounds the affected corners, filling the corner area defined by the border-radius for that corner. However in some cases, other corner shapes are desired. The corner-*-shape properties (and their shorthands) specify exactly what corner shapes a box will use for the region defined by its border-*-radius values.

すべての`隅~図形$は、 異なる~parameterをとる`超楕円^emにより表出できる。 超楕円は、 楕円の一般~化であり，［ 正方形, 楕円, `notch^en 【凹な直角】 ］の合間を成すすべての図形を その %K ~parameter【`超楕円~parameter$】で表出できることに基づく。 ◎ The different corner shapes can all be expressed as different parameters to a superellipse. A superellipse is a generalization of an ellipse, and based on its `k` parameter can express all the shapes between a square, an ellipse, and a notch.

全部的な表出と補間を許容するため、 各種 `corner-shape$p ~propは，`超楕円~parameter$を［ `superellipse$f 関数／ 共通的に利用される~parameterを表現する各種~keyword ］を利用して直に供せる。 詳細は `corner-shape-value$t の定義を見よ。 ◎ To allow full expression as well as interpolation, the corner-shape properties can provide the superellipse parameter directly using the superellipse() function, or use one of the supplied keywords which represent commonly used parameters. See the <corner-shape-value> definition for details.

これらの下位propは、 対応する隅~用の`隅~図形$を設定する。 ◎ The corner-*-*-shape longhand properties set the corner shape for the given corner.

これらのうち名前に［ `start^css ／ `end^css ］を伴うものは`~flow相対$な~propであり， 他は`物理的$な~propである。 前者と後者の対応付けは、 当の要素の［ `writing-mode$p, `direction$p, `text-orientation$p ］に依存する — 各~flow相対な~prop名を成す［ `start^css ／ `end^css ］のうち［ 1 個目は塊-軸, 2 個目は行内-軸 ］の［ 始端／終端 ］側を表すことに基づいて。 ◎ The flow-relative longhands (corner-start-start-shape, etc.) correspond to the physical longhands (corner-top-left-shape, etc.) depending on the element’s writing-mode, direction, and text-orientation. The first start/end gives the block axis side, and the second the inline-axis side (i.e. patterned as corner-block-inline-shape).

`corner-shape-value@t
	= `round$v
	| `scoop$v
	| `bevel$v
	| `notch$v
	| `square$v
	| `squircle$v
	| `superellipse()$t

`superellipse()@t
	= superellipse(`number$t | `infinity^v | `-infinity^v)

`round@v

`隅~図形$は `superellipse(1)^v に等価（凸な四分~楕円）になる。 ◎ The corner shape is a quarter of a convex ellipse. Equivalent to superellipse(1).

注記： この値が各種 `corner-*-*-shape^p の初期~値として選ばれたのは、 それが，これらの~propが存在する前における `border-radius$p の挙動であったことによる。 ◎ Note: This is the initial value of corner-shape properties, as it was the behavior of border-radius before corner-shape existed.

`squircle@v

`隅~図形$は `superellipse(2)^v に等価 （ `round$v, `square$v の合間にある凸な四分 “`squircle^en” ） になる。 ◎ The corner shape is a quarter of a "squircle", a convex curve between round and square. Equivalent to superellipse(2).

`square@v

`隅~図形$は `superellipse(infinity)^v に等価 （凸な~~直角） になる。 ◎ The corner shape is a convex 90deg angle. Equivalent to superellipse(infinity).

注記： これは、 `border-radius$p が `0^v をとるとき取得される “通常の” 直角な隅と見かけは一致するが， `corner-shape$p 用の他の値と滑らかに~animateできる。 ◎ Note: This looks identical to the "normal" square corner you get from border-radius: 0, but it can smoothly animate with the other corner-shape values.

`bevel@v

`隅~図形$は `superellipse(0)^v に等価 （凸でも凹でもない斜線） になる。 ◎ The corner shape is a straight diagonal line, neither convex nor concave. Equivalent to superellipse(0).

`scoop@v

`隅~図形$は `superellipse(-1)^v に等価 （凹な四分~楕円） になる。 ◎ The corner shape is a concave quarter-ellipse. Equivalent to superellipse(-1).

`notch@v

`隅~図形$は `superellipse(-infinity)^v に等価 （凹な~~直角） になる。 ◎ The corner shape is a concave 90deg angle. Equivalent to superellipse(-infinity).

`superellipse()$t

`隅~図形$は四分~超楕円になる。 引数 %K は、 `超楕円~parameter@ と称され，冪指数 2^%K を利用して超楕円を定義する。 ◎ The corner shape is a quarter of a superellipse. The argument K is the superellipse parameter, and it defines a superellipse using an exponent of 2K.

超楕円を成す数学的な定義の説明, 様々な %K 値が何を意味するかについては、 `§ 隅の形状付け＠#corner-shaping$ 内の注記を見よ。 超楕円が精確に どう算出され, 描画されるかの詳細は、 `§ 隅~図形の描画-法＠#corner-shape-rendering$ を見よ。 ◎ See the note in § 3.7 Corner Shaping: the corner-*-shape properties for an explanation of the mathematical definition of a superellipse, and what various K values mean. See § 3.9.4 Rendering corner-shape for precise details of how the superellipse is computed and rendered.

注記： `border-radius$p が指定されなかった（または 0 に設定された）場合、 `隅~区画$の~sizeも 0 になり， `corner-shape$p による効果は無くなる。 ◎ Note: If border-radius is not specified (or is set to 0), the corner area is zero-sized as well, and corner-shape won’t have any effect.

`corner-*-shape$p は、 当の隅の形状を違えることを除き， `border-*-radius$p 用の`~overflow$規則を改めない — 当の要素【の内容】は、 形状付けられた~borderにより通常通り切取られる。 ◎ corner-*-shape does not alter the overflow rules for border-*-radius, except insofar as it shapes the corners differently; elements are still clipped by the shaped border as normal.

`corner-*-shape$p により指定された曲線は、 `~border区画$の`外縁^emな辺を定義する。 ~border区画の内縁な辺は、 外縁な辺を成す曲線を — 全体を通して，外縁~辺から ほぼ一貫した距離を~~保つよう （あるいは、 当の隅にて出会っている 2 本の~border辺の`幅$bDが一致しない場合は， 距離が線形に増減していくよう） — なぞる （その曲線は、 超楕円になるとは限らない）。 ◎ The curve specified by corner-*-shape defines the outer edge of the border. The inner edge of the border follows the curve of the outer edge (in a way that’s not necessarily expressible as a superellipse curve), with a nearly consistent distance from the outer edge throughout, (or a linearly increasing distance if the border-width of the two border edges meeting at the the corner are not uniform).

`corner-*-shape$p は、 `box-shadow$p の描画にも［ `~overflow切取n辺$が~boxから拡張されるときにおける，その形状付け ］にも影響するが、 これらは，内縁な~border辺の様に `corner-*-shape$p による~pathを直になぞることはない。 代わりに，それは、 当の~pathを軸に整列される方式で拡縮する 【`§ 隅~図形の描画-法＠#corner-shape-rendering$】。 ◎ corner-*-shape also affects the rendering of box-shadow, and how the overflow clip edge is shaped when it’s extended from the box, but these do not directly follow the corner-*-shape path like the inner border edge does. Instead, it scales the corner-shape path in an axis-aligned manner.

3.8. 隅の形状付け略式： `corner-shape^p, `corner-*-shape^p 略式~prop

3.9. 隅の~sizingと形状付け略式： `corner^p, `corner-*^p 略式~prop

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

4.1. ~border画像の~source： `border-image-source^p ~prop

`border-image-source$p ~propは、 `border-*-style$p により指定される描画に代えて `~border画像@ — ~borderとして利用する画像 — を指定する。 `border-image-slice$p に `fill$v ~keywordも与えられた場合、 要素~用の画像の後景も追加的に指定する。 値 `none@v をとる場合／ 画像を表示できない場合 （および，この~propを適用し得ない場合も）、 `~border~style$が利用されることになる。 他の場合、 `border-*-style$p による~borderは描かれず，この`~border画像$が — 以下の各~節に述べるとおり — 描かれることになる。 ◎ Specifies an image to use as a border in place of the rendering specified by the border-style properties and, if given the fill keyword in border-image-slice, as an additional image backdrop for the element. If the value is none or if the image cannot be displayed (or the property doesn’t apply), the border styles will be used; otherwise the element’s border-style borders are not drawn and this border image is drawn as described in the sections below.

4.2. ~border画像の切分け法： `border-image-slice^p ~prop

この~propは、 画像を［ 4 隅, 4 辺, 真中 ］の 9 片に分割するための［ 画像の各~辺から内方への~offset ］を指定する。 `fill$v ~keywordが無い場合、 真中の画像~片は破棄される（全部的に透明と扱われる）。 （これは、 背景の手前に描かれる — `§ ~border画像の描法$を見よ。） ◎ This property specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the fill keyword is present. (It is drawn over the background; see Drawing the Border Image.)

（ `fill^v を除く）成分~値たちは、 これら各~側からの~offsetを`時計回りに設定する$。 【長さ値はとり得ないことに注意。】 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

`percentage [0,∞]$t

百分率による［ 横／縦 ］~offsetは、 画像の［ 横幅／縦幅 ］に相対的になる。 ◎ Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.

`number [0,∞]$t

~raster画像においては、 画像~内の画素~数を表現する。 ~vector画像においては、 ~vector座標を表現する。 ◎ Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is a vector image).

`fill@v

この~keywordが在る場合、 真中の~border画像~片も保全される（既定では，破棄され, 空として扱われる）。 ◎ The fill keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)

負な値は妥当でない。 画像~sizeを超える算出d値は、 `100%^v として解釈される。 ◎ Negative values are invalid. Computed values larger than the size of the image are interpreted as 100%.

`border-image-slice$p により，互いに対辺にある画像~片は、 重合することもある。 左右~offset値の和が画像~全体の横幅~以上になる場合、［ 上辺, 真中, 下辺 ］画像は空になり，空でない透明な画像が指定されたときと同じ効果になる。 上下~offset値に対しても，縦横を入れ替えて同様になる。 ◎ The regions given by the border-image-slice values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty—which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.

切分け~~位置を決定するために画像~sizeを要する場合（例えば，`生来な寸法$を伴わない~SVG画像）、 それは，［ `指定d~size$として拘束~無し, `既定の~obj~size$として`~border画像~区画$ ］を与える下で，`既定の~sizing~algo$を利用して~sizeされる。 ◎ If the image must be sized to determine the slices (for example, for SVG images with no natural dimensions), then it is sized using the default sizing algorithm with no specified size and the border image area as the default object size.

4.3. 描かれる区画： `border-image-width^p ~prop

`~border画像$は、 `~border画像~区画@ と呼ばれる区画に描かれる。 その境界は `border-image-outset$p から決定され、 既定では`~border~box$に一致する。 ◎ The border image is drawn inside an area called the border image area. This is an area whose boundaries by default correspond to the border box, see border-image-outset.

`border-image-width$p は、 `~border画像~区画$を 9 個の `~border画像~領域@ と称される領域に分割するための~offsetを指定する。 これらの~offsetは、［ 区画の各~辺から分割する線まで ］の内方への距離を表現する。 ◎ The four values of border-image-width specify offsets that are used to divide the border image area into nine regions.＼ The offsets represent inward distances from the top, right, bottom, and left sides of the area, respectively.

成分~値たちは、 これら各~側からの距離を`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

各種 値の意味は： ◎ Values have the following meanings:

`length-percentage [0,∞]$t

百分率による［ 横／縦 ］~offsetは、 `~border画像~区画$の［ 横幅／縦幅 ］に相対的になる。 ◎ Percentages refer to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets.

`number [0,∞]$t

実数による~offsetは、 対応する `border-*-width$p の`算出d値$の何倍になるかを表現する。 ◎ Numbers represent multiples of the corresponding computed border-width.

`auto@v

`border-image-width$p の`使用~値$は、 対応する画像~片（ `border-image-slice$p を見よ）の`生来な~size$（横幅, 縦幅のうち適用-可能な方）になる。 要求される`生来な寸法$が当の画像には無い場合、 対応する `border-*-width$p の`算出d値$が代わりに利用される。 ◎ If auto is specified then the used border-image-width is the natural width or height (whichever is applicable) of the corresponding image slice (see border-image-slice). If the image does not have the required natural dimension then the corresponding computed border-width is used instead.

負な値は妥当でない。 ◎ Negative values are invalid for any border-image-width values.

`border-image-width$p の値を成す ある~offsetにより， 互いに対辺にある 2 つの辺~部位が重合する場合、 `border-image-width$p の`使用~値$は、 値を成す すべての~offsetを，重合しなくなる所まで同じ倍率で削減した結果になる — 数学的には、［［ 次の 2 つの値の最小 %f ］ ~LT 1 ］ならば，すべての~offsetに %f を乗算して削減した結果が`使用~値$になる ⇒＃ `~border画像~区画$の横幅 ~DIV ( 左側~offset ~PLUS 右側~offset ), `~border画像~区画$の縦幅 ~DIV ( 上側~offset ~PLUS 下側~offset ) ◎ If two opposite border-image-width offsets are large enough that they overlap, then the used values of all border-image-width offsets are proportionally reduced until they no longer overlap. In mathematical notation: Given Lwidth as the width of the border image area, Lheight as its height, and Wside as the border-image-width offset for the side side, let f = min(Lwidth/(Wleft+Wright), Lheight/(Wtop+Wbottom)). If f < 1, then all W are reduced by multiplying them by f.

4.4. 辺の張り出し量： `border-image-outset^p ~prop

`border-image-outset$p は、 `~border画像~区画$が`~border~box$を超えて拡張する量を指定する。 ◎ The values specify the amount by which the border image area extends beyond the border box.

成分~値たちは、 これら各~側から拡張する量を`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

`length [0,∞]$t

指定された長さによる~outsetを表現する。 ◎ Represents an outset of the specified length.

`number [0,∞]$t

対応する `border-*-width$p の算出d値の，指定された倍数による~outsetを表現する。 ◎ Represents an outset of the specified multiple of the corresponding computed border-width.

負な値は妥当でない。 ◎ Negative values are invalid.

~border画像の［ `~border~box$の外側に描画される部分 ］は、 `~ink~overflow$であり，~scrollingが誘発されることはない。 その部分は、 ~mouse~event【および`~pointer~event＠~POINTEREVENTS$】からは不可視とされ， 当の要素~用に~eventを捕捉することはない。 ◎ Portions of the border-image that are rendered outside the border box are ink overflow and do not trigger scrolling. Also such portions are invisible to mouse events and do not capture such events on behalf of the element.

注記： 画像が~outsetされても，~scrollingは決して誘発されないが、 それでも，先祖や表示域の外側で切取られ得る。 ◎ Note: Even though they never cause a scrolling mechanism, outset images may still be clipped by an ancestor or by the viewport.

4.5. 画像の敷詰め法： `border-image-repeat^p ~prop

この~propは、 9 片に分割された`~border画像$を［ 各自に対応する`~border画像~領域$に，どう拡縮して敷詰めるか ］を指定する。 1 個目の~keywordは，［ 上辺, 真中, 下辺 ］用の画像~片に対する横方向の［ 拡縮-法／敷詰め法 ］に適用され、 2 個目の~keywordは，［ 左辺, 真中, 右辺 ］用の画像~片に対する縦方向の［ 拡縮-法／敷詰め法 ］に適用される — `§ ~border画像の描法$を見よ。 2 個目の~keywordが無い場合、 1 個目と同じと見做される。 各種 値の意味は： ◎ This property specifies how the images for the sides and the middle part of the border image are scaled and tiled. The first keyword applies to the horizontal scaling and tiling of the top, middle and bottom parts, the second to the vertical scaling and tiling of the left, middle and right parts; see Drawing the Border Image. If the second keyword is absent, it is assumed to be the same as the first. Values have the following meanings:

`stretch@v

画像~片は、 対応する`~border画像~領域$を埋めるよう伸張される。 ◎ The image is stretched to fill its corresponding region.

`repeat@v

画像~片は、 対応する`~border画像~領域$を埋めるよう敷詰められる（繰返される）。 ◎ The image is tiled (repeated) to fill its corresponding region.

`round@v0

画像~片は、 対応する`~border画像~領域$を埋めるよう敷詰められる（繰返される）。 整数個の~tileで埋尽くせないときは、 埋尽くせるよう画像~片は拡縮し直される。 ◎ The image is tiled (repeated) to fill its corresponding region. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.

`space@v

画像~片は、 対応する`~border画像~領域$を埋めるよう敷詰められる（繰返される）。 整数個の~tileで埋尽くせないときは、 余った空間が~tileの周囲に分配される。 ◎ The image is tiled (repeated) to fill its corresponding region. If it does not fill the region with a whole number of tiles, the extra space is distributed around the tiles.

各~画像~片を対応する`~border画像~領域$へ［ 拡縮する, 敷詰める ］ための正確な処理は、 次~節にて与えられる。 ◎ The exact process for scaling and tiling the border-image parts is given in the section below.

4.6. ~border画像の描法

`~border画像$を `border-image-slice$p により切分けて得られた 9 片の画像は、 次の 4 段を経て，拡縮され, 位置されてから， 各自に対応する`~border画像~領域$ — 以下，この節では単に “領域” と称する — に敷詰められる： ◎ After the border image given by border-image-source is sliced by the border-image-slice values, the resulting nine images are scaled, positioned, and tiled into their corresponding border image regions in four steps:

1. `border-image-width$p に~~収まるように拡縮する： ◎ Scale to border-image-width.

   • ［ 上辺, 下辺 ］用の画像を拡縮する — その縦横比を保ちつつ，その縦幅が［ 対応する領域の縦幅 ］と同じになるよう。 ◎ The two images for the top and bottom edges are made as tall as the top and bottom border image regions, respectively, and their width is scaled proportionally.
   • ［ 左辺, 右辺 ］用の画像を拡縮する — その縦横比を保ちつつ，その横幅が［ 対応する領域の横幅 ］と同じになるよう。 ◎ The images for the left and right edges are made as wide as the left and right border image regions, respectively, and their height is scaled proportionally.
   • 各~隅~用の画像を拡縮する — その［ 横幅／縦幅 ］が，対応する領域の［ 縦／横 ］に隣接する領域の［ 横幅／縦幅 ］と同じになるよう。 ◎ The corner images are scaled to be as wide and as tall as the their respective border image regions.
   • 真中~用の画像の［ 横幅／縦幅 ］を［ 上辺／左辺 ］用の画像と同じ係数で拡縮する — ただし，係数が［ 0 または無限大 ］になる場合、［ 下辺／右辺 ］用の画像の拡縮ng係数で代用する。 それもできない場合、 拡縮しない。 ◎ The middle image’s width is scaled by the same factor as the top image unless that factor is zero or infinity, in which case the scaling factor of the bottom is substituted, and failing that, the width is not scaled. The height of the middle image is scaled by the same factor as the left image unless that factor is zero or infinity, in which case the scaling factor of the right image is substituted, and failing that, the height is not scaled.

2. `border-image-repeat$p に従って拡縮する： ◎ Scale to border-image-repeat.

   値を成す 1 個目の~keywordに応じて、 画像~片の横幅のみを次に従って拡縮する： ◎ ↓

   • `stretch$v ⇒ ［ 上辺, 真中, 下辺 ］用の画像を［ その横幅が真中~領域の横幅と同じになる ］よう拡縮する。 ◎ If the first keyword is stretch, the top, middle and bottom images are further scaled to be as wide as the middle region of the border image area. The height is not changed any further.
   • `round$v0 ⇒ ［ 上辺, 真中, 下辺 ］用の画像を［ その横幅の整数倍が真中~領域の横幅と同じになる ］よう拡縮する — `background-repeat$p ~propが `round＠~CSSBG#valdef-background-repeat-x-round$v をとるときと，ちょうど同じく。 ◎ If the first keyword is round, the top, middle and bottom images are resized in width, so that exactly a whole number of them fit in the middle region of the border image area, exactly as for round in the background-repeat property.
   • `repeat$v ／ `space$v ⇒ ［ 上辺, 真中, 下辺 ］用の画像は変更されない。 ◎ If the first keyword is repeat or space, the top, middle, and bottom images are not changed any further.
3. 値を成す 2 個目の~keywordに対しても、［ 左辺, 真中, 右辺 ］用の画像を — 前段と相似的に，横幅を縦幅に読み替える下で — 拡縮する。 ◎ The effects of stretch, round, repeat, and space for the second keyword are analogous, acting on the height of the left, middle and right images.

4. 最初の~tileを位置する： ◎ Position the first tile.

   • ［ 上辺, 真中, 下辺 ］用の画像を対応する領域に配置する — 1 個目の~keywordに応じて ⇒＃ `repeat$v ならば 横方向において中央~寄せに／ ~ELSE_ 左~寄せに ◎ If the first keyword is repeat, the top, middle, and bottom images are centered horizontally in their respective regions. Otherwise the images are placed at the left edge of their respective regions of the border image area.
   • ［ 左辺, 真中, 右辺 ］用の画像を対応する領域に配置する — 2 個目の~keywordに応じて ⇒＃ `repeat$v ならば 縦方向において中央~寄せに／ ~ELSE_ 上~寄せに ◎ If the second keyword is repeat, the left, middle, and right images are centered vertically in their respective regions. Otherwise the images are placed at the top edge of their respective regions of the border image area.

5. 敷詰めて描く： ◎ Tile and draw.

   • 各 画像~片を，各自に対応する領域を埋めるよう敷詰める。 ◎ The images are then tiled to fill their respective regions.
   • `space$v に対しては、 部分的に現れる~tileは すべて破棄し，余った空間を各~tileの周囲に均等に分配する — すなわち、［ 最初の~tileより前にある隙間, 最後の~tileより後にある隙間, 各~tileの合間にある隙間 ］を均等にする。 各~側を成す［ 隅, 辺 ］領域は空になることもある。 ◎ In the case of space, any partial tiles are discarded and the extra space distributed before, after, and between the tiles. (I.e. the gap before the first tile, the gap after the last tile, and the gaps between tiles are equalized.) This can result in empty border-image side regions.
   • 各 画像~片は、 通常の~borderと同じく，［ 同じ積層~levelの中で，背景~層の直ぐ手前にある層 ］に描く。 ◎ The images are drawn at the same stacking level as normal borders: immediately in front of the background layers.
   • `border-image-slice$p【！border-image-source】 に `fill$v が指定されていない場合、 真中~用の画像は描かない。 ◎ The middle image is not drawn unless fill was specified for border-image-source.

4.7. ~border画像： `border-image^p 略式~prop

これは、 次に挙げる~propを単独の宣言で設定する`略式~prop$である — 値が省略された~propは、 各自の`初期~値$に設定される ⇒＃ `border-image-source$p, `border-image-slice$p, `border-image-width$p, `border-image-outset$p, `border-image-repeat$p ◎ This is a shorthand property for setting border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat in a single declaration. Omitted values are set to their initial values.

4.8. ~tableに対する効果

`border-image-*$p は、［ `border-collapse$p が `collapse^v にされた［ ~table, 行内~table ］の~border ］にも適用される。 しかしながら，この仕様は、 その種の画像~borderをどう描画するかは，定義しない。 特に、 画像~borderと［ ~tableの各~辺に接する［ ~cell／~row／~row~group ］の~border ］が どう相互作用するかは，定義しない （ `CSS2$r による`~borderの競合-解決$を見よ）。 ◎ The border-image properties apply to the border of tables and inline tables that have border-collapse set to collapse. However, this specification does not define how such an image border is rendered. In particular, it does not define how the image border interacts with the borders of cells, rows and row groups at the edges of the table (see border conflict resolution in [CSS2]).

将来の仕様が，描画を定義するものと期待されている。 それまでは、 ~UAには，［ `border-collapse$p が `collapse^v にされた~table ］には~border画像を適用しないことが推奨される。 ◎ It is expected that a future specification will define the rendering. It is recommended that UAs do not apply border images to tables with collapsed borders until then.

6.1. 影の色~付け： `box-shadow-color^p ~prop

`box-shadow-color$p ~propは、 ~commaで分離された色たちが成す~listを受容する — それを成す各~itemは、 対応する落影の色を定義する。 ◎ The box-shadow-color property defines one or more drop shadow colors. The property accepts a comma-separated list of shadow colors.

［ `box-shadow-color$p, 他の各種 `box-shadow-*$p ］の~commaで分離された値たちどうしが，どう相互作用して各~落影~層を形成するかについては、 `§ 多層化, ~layout, その他の詳細$ を見よ。 ◎ See the section “Layering, Layout, and Other Details” for how box-shadow-color interacts with other comma-separated drop shadow properties to form each drop shadow layer.

6.2. 影の~offset法： `box-shadow-offset^p ~prop

`box-shadow-offset$p ~propは、 ~commaで分離された~listを受容する — 各~itemは、［ `none$v0 ／ 1 個の `length$t ／ 2 個の `length$t が成す~pair ］を値にとり，対応する落影の~offsetを定義する。 ◎ The box-shadow-offset property defines one or more drop shadow offsets. The property accepts a comma-separated list. Each item in that list can either＼ be the none value, which indicates no shadow,＼ a pair of <length> values, which define the horizontal and vertical offsets,＼ or a single <length> value, which sets both offsets to the same value.

`none@v0

当の影は描画されなくなる。 他の各種 `box-shadow-*$p の［ この影に対応している値 ］による効果はなくなる。 ◎ The shadow will not be rendered. The values of other box shadow properties corresponding to this shadow have no effect.

`length$t{1,2} ◎ ↓

順に， 描かれる影の~boxからの［ `横~offset@ , `縦~offset@ ］を指定する。 前者に対する［ 正な値は右／負な値は左 ］へ~offsetする。 後者に対する［ 正な値は下／負な値は上 ］へ~offsetする。 `length$t が 1 個しか指定されなかった場合、 それが，`縦~offset$も設定する。 ◎ 1st <length> ◎ Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left. ◎ If only one <length> value is specified, it sets both the horizontal and vertical offsets to that value. ◎ 2nd <length> ◎ Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.

［ `box-shadow-offset$p, 他の各種 `box-shadow-*$p ］の~commaで分離された値たちどうしが， どう相互作用して各~落影~層を形成するかについては、 `§ 多層化, ~layout, その他の詳細$ を見よ。 ◎ See the section “Layering, Layout, and Other Details” for how box-shadow-offset interacts with other comma-separated drop shadow properties to form each drop shadow layer.

6.3. 影のボカシ法： `box-shadow-blur^p ~prop

`box-shadow-blur$p ~propは、 ~commaで分離された `length$t 値たちが成す~listを受容する — それを成す各~itemは、 対応する落影の `ボカシ半径@ を定義する。 ◎ The box-shadow-blur property defines one or more blur radii for drop shadows. The property accepts a comma-separated list of <length> values.

負な値は妥当でない。 値 0 は影の辺をくっきりさせ、 値が大きいほどボカされる。 `§ 影のボカシ法＠#shadow-blur$を見よ。 ◎ Negative values are invalid. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred. See Shadow Blurring, below.

［ `box-shadow-blur$p, 他の各種 `box-shadow-*$p ］の~commaで分離された値たちどうしが， どう相互作用して各~落影~層を形成するかについては、 `§ 多層化, ~layout, その他の詳細$ を見よ。 ◎ See the section “Layering, Layout, and Other Details” for how box-shadow-blur interacts with other comma-separated drop shadow properties to form each drop shadow layer.

6.4. 影の拡幅-法： `box-shadow-spread^p ~prop

`box-shadow-spread$p ~propは、 ~commaで分離された `length$t 値たちが成す~listを受容する — それを成す各~itemは、 対応する落影の `拡幅~距離@ を定義する。 ◎ The box-shadow-spread property defines one or more spread distances for drop shadows. The property accepts a comma-separated list of <length> values.

［ 正な値／負な値 ］は、 指定された距離【！半径】だけ，縦横とも影を［ 拡げる／狭める ］。 `§ 影の形状＠#shadow-shape$を見よ。 ◎ Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. See Shadow Shape, below.

注記： `内影$に対し，影を拡げる（面積を増やす）ことは、 影でない領域 — すなわち，~boxの内側~領域の投影 — の形状を狭めることを意味する。 ◎ Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape.

［ `box-shadow-spread$p, 他の各種 `box-shadow-*$p ］の~commaで分離された値たちどうしが， どう相互作用して各~落影~層を形成するかについては、 `§ 多層化, ~layout, その他の詳細$ を見よ。 ◎ See the section “Layering, Layout, and Other Details” for how box-shadow-spread interacts with other comma-separated drop shadow properties to form each drop shadow layer.

6.5. 影の拡幅-法： `box-shadow-position^p ~prop

`box-shadow-position$p ~propは、 ~commaで分離された［ `outset$v0 ／ `inset$v0 ］~keywordたちが成す~listを受容する — それを成す各~itemは、 対応する落影の位置を定義する。 ◎ The box-shadow-position property defines one or more drop shadow positions. The property accepts a comma-separated list of outset and inset keywords.

`outset@v0

当の落影は、 `外影@ になる — すなわち、 当の~boxが手前に浮かんでいるかのように，~canvas上に影を~~落とすようになる。 ◎ Causes the drop shadow to be an outer box-shadow. That means, one that shadows the box onto the canvas, as if it were lifted above the canvas.

`inset@v0

当の落影は、 `内影@ になる — すなわち、 当の~boxが背後に沈んでいるかのように，~canvas上に影を~~落とすようになる。 ◎ Causes the drop shadow to be an inner box-shadow. That means, one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it.

［ `box-shadow-position$p, 他の各種 `box-shadow-*$p ］の~commaで分離された値たちどうしが， どう相互作用して各~落影~層を形成するかについては、 `§ 多層化, ~layout, その他の詳細$ を見よ。 ◎ See the section “Layering, Layout, and Other Details” for how box-shadow-position interacts with other comma-separated drop shadow properties to form each drop shadow layer.

6.6. 落影~略式： `box-shadow^p ~prop

`box-shadow$p ~propは、 当の~boxに 1 個以上の落影を付する。 この~propは、 手前から背後へ順序付けられ, ~commaで分離された影たちが成す~listを受容する。 ◎ The box-shadow property attaches one or more drop-shadows to the box. The property accepts a comma-separated list of shadows, ordered front to back.

各~影は `spread-shadow$t として与えられる。 それは、［ 2 個の `length$t 値により定義される `box-shadow-offset$p 用の値 ］と省略可能な［ `box-shadow-blur$p, `box-shadow-spread$p, `box-shadow-color$p, `box-shadow-position$p ］用の値からなる。 省略された長さは `0^v になる。 色が省略された場合の既定は、 指定された~offsetに応じて［ `none$v0 ならば `transparent＠~CSSCOLOR#valdef-color-transparent$v ／ ~ELSE_ `currentcolor$v ］になる。 ◎ Each shadow is given as a <spread-shadow>, outlining the box-shadow-offset defined by two <length> values, and optional values for the box-shadow-blur, box-shadow-spread, box-shadow-color, and box-shadow-position. Omitted lengths are 0; omitted colors default to transparent when the specified offset is none and to currentcolor otherwise.

注記： `box-shadow-offset$p ~propは， 1 個の `length^t 値を利用して両~offsetを指定できるが、 構文解析における他の~prop用の `length$t 値との多義性を避けるため， この~propにおける~offsetは 2 個の `length^t 値として指定する必要がある。 ◎ Note: To avoid ambiguities in parsing the different <length> values, the offset has to be specified as two <length> values, in opposite to the box-shadow-offset property, where a single <length> value can be used to specify both offsets.

`spread-shadow@t
	= `box-shadow-color$tp?
		&& [ [ `none$v0 | `length$t{2} ] [ `box-shadow-blur$tp `box-shadow-spread$tp? ]? ]
		&& `box-shadow-position$tp?

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 rgb(0 0 0 / 0.4),
            12px 12px 0px 8px rgb(0 0 0 / 0.4) inset;

border: 5px solid blue;
background-color: orange;
width: 144px;
height: 144px;
border-radius: 20px;

box-shadow:
  rgb(0 0 0 / 0.4)
  10px 10px;

box-shadow:
  rgb(0 0 0 / 0.4)
  10px 10px
  inset

box-shadow:
  rgb(0 0 0 / 0.4)
  10px 10px 0
  10px /* 拡幅 */

box-shadow:
  rgb(0 0 0 / 0.4)
  10px 10px 0
  10px /* 拡幅 */
  inset

6.7. 多層化, ~layout, その他の詳細

［ 各種 `box-shadow-*^p ~propから構築される`協調される値~list$ ］内に宣言された落影たちは、 `協調している~list~prop~group$を形成する — `協調している基底~list~prop$として `box-shadow-offset$p と伴に 。 `CSS-VALUES-4$r `§ 協調している~list値をとる~prop群＠~CSSVAL#linked-properties$ を見よ。 ◎ Drop shadows are declared in the coordinated value list constructed from the box-shadow-* properties, which form a coordinating list property group with box-shadow-offset as the coordinating list base property. See CSS Values 4 § A Coordinating List-Valued Properties.

影による効果は、 手前から背後の順に — 最初の影が最も手前になり，他の層は その背後に重なるよう — 適用される。 影は、 ~layoutには波及しない。 影は、［ 他の~boxや~text, それらの影 ］と重合する【！(or be overlapped by)】こともある。 積層~文脈と塗ng順序においては、 要素に付された影のうち ⇒＃ `外影$は，要素~背景の直ぐ背後にある層に描かれる。 `内影$は，要素の背景の直ぐ手前, かつ~borderや~border画像の背後に描かれる。 ◎ The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind. Shadows do not influence layout and may overlap (or be overlapped by) other boxes and text or their shadows. In terms of stacking contexts and the painting order, the outer box-shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).

他が指定されない限り、 落影は`首要~box$に限り適用される。 影響される~boxが複数に断片化される場合、 当の影は `box-decoration-break$p にて指定されたとおりに適用される。 ◎ Unless otherwise specified, drop shadows are only applied to the principal box. If the affected box has multiple fragments, the shadows are applied as specified in box-decoration-break.

影により［ ~scrollingが誘発される／ ~scroll可能な区画【`~scroll可能な~overflow区画$】の~sizeが増やされる ］ことはない。 ◎ Shadows do not trigger scrolling or increase the size of the scrollable area.

`外影$は、 `~borderの縮約~model$における`内部~table要素$には，効果は無い。 `~borderの縮約~model$において［ 複数の太さを併せ持つ単独の~border辺 ］用に定義された影に対しては、 その正確な位置や描画-法は未定義である （例： ある~tableを成すある~rowの~borderが他より太いときの，当の~table上の外影） （例： 複数の~rowにまたがる~table~cellが［ ~borderの太さが互いに異なる複数の~cell ］と連接しているときの，当の~cell上の内影）。 ◎ Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model that has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.

7.1. `border-shape^p ~prop

`border-shape$p ~prop は、［ 1 個／ 2 個 ］の `basic-shape$t 値を利用して，要素の~border用の~customな図形を定義する。 ◎ The border-shape property defines custom shapes for element borders using one or two basic shape values.

7.2. 構文と用法~mode

`border-shape$p ~propは、［ 1 個／ 2 個 ］の `basic-shape$t を受容する — 指定された個数に応じて： ◎ The border-shape property accepts either a single <basic-shape> or two <basic-shape>s:

1 個の場合 （~stroke~mode） ◎ Single <basic-shape> (Stroke mode)

~borderは、 当の図形を成す~pathをなぞる~strokeとして描画される。 ~stroke幅は、 `関連な側$の`関連な側$の`~border幅$ — `border-*-width$p の`算出d値$ — により決定される。 【すなわち，`~stroke図形$を占める。】 この~modeは、 外形線をなぞる図形を作成するために有用になる。 ◎ The border is rendered as a stroke along the shape’s path, with the stroke width determined by the relevant side’s computed border width. This mode is useful for creating outlined shapes.

2 個の場合 （~fill~mode） ◎ Two <basic-shape>s (Fill mode)

~borderは、 指定された 2 本の~pathの合間を成す区画として描画される。 ［ 1 個目の図形は外縁~境界／ 2 個目の図形は内縁~境界 ］を定義する。 この~modeは、 ~border領域の幾何に対する精確な制御を供する。 ~borderの色は、 `関連な側$の`~border色$ — `border-*-color$p の`算出d値$ — になる。 ◎ The border is rendered as the area between the two paths. The first shape defines the outer boundary, and the second shape defines the inner boundary. This mode provides precise control over the border region’s geometry. The fill color of the border is the relevant side’s computed border-color.

【 ［ 2 本の~pathが交差している場合／ 2 本目の~pathが視覚的には外縁になっている場合 ］にどう解釈されるか， はっきりしない。 個々の `basic-shape$t は、 巻数~規則（ `fill-rule$tp ）を指定し得るとしても。 】

7.3. 基準~box

`geometry-box$t が明示的に供されなかった場合の既定の基準~box~FN は、 `basic-shape$t 値の個数に依存する： ◎ When a <geometry-box> is not explicitly provided, the default reference box depends on the number of <basic-shape> values:

【~FN 原文には明示的に述べられていないが、 各 `geometry-box$t は， 対応する `basic-shape$t 用の`基準~box$を指定する （他に解釈しようがない） — 特に， `basic-shape$t を成す百分率たちの算出は、 これに基づく。 】

1 個の場合 ◎ Single <basic-shape>

`half-border-box＠~CSSSHAPES#valdef-shape-box-half-border-box$v になる。 それは、 ~borderの既定の挙動に合致するよう — 当の図形~pathから［ 内方, 外方 ］へ等しく拡張している~borderで — ~strokeを位置する。 ◎ The <geometry-box> defaults to the half-border-box value, which positions the stroke to match the default border behavior, with the border extending equally inward and outward from the shape path.

2 個の場合 ◎ Two <basic-shape>s

［ 1 個目（外縁）においては `border-box＠~CSSSHAPES#valdef-box-border-box$v【！`~border~box$】／ 2 個目（内縁）においては `padding-box＠~CSSSHAPES#valdef-box-padding-box$v【！`~padding~box$】 ］になる。 それは、 各種 `border-*-width$p ~propが最終的な図形に【！naturally】影響することを許容する。 ◎ The first (outer) shape defaults to the border box, and the second (inner) shape defaults to the padding box. This allows the border-width properties to naturally affect the final shape.

7.4. 例

.circular-button {
  width: 100px;
  height: 100px;
  border: 5px solid blue;
  border-shape: circle(50%);
}

.diamond {
  width: 200px;
  height: 200px;
  border: 10px solid crimson;
  border-shape:
    polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
    polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%);
}

.custom-shape {
  border: 8px solid green;
  border-shape: path('M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z');
}

.fancy-box {
  width: 100px;
  height: 100px;
  border-top-width: 10px;
  border-right-width: 5px;
  border-bottom-width: 10px;
  border-left-width: 5px;
  border-style: solid;
  border-color: purple;
  border-shape: ellipse(50% 40%);
}

7.5. 他の~propとの相互作用

.shaped-shadow {
  border-shape: circle(50%);
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.3);
}

7.6. 関連な側の決定-法

注記： この~algoは、 ~borderを成す複数の側の［ `~border~style$／`~border幅$ ］が異なるときも挙動が一貫することを確保する。 各~側の~borderのうち論理-順序【上の表tに挙げた順序】で `none^v でない最初のものが，［ 形状付けられる~border用に利用される~border特性 ］を決定する。 ◎ Note: This algorithm ensures consistent behavior when multiple border sides have different styles or widths. The first non-none border side (in logical order) determines the border characteristics used for the shaped border.