diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index d76ee19e73e..9615aa15183 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -14,45 +14,78 @@ Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 649 Editor: Noam Rosenthal, Google, w3cid 121539 Former Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343 Abstract: This module contains the features of CSS relating to the borders and decorations of boxes on the page. -Ignored Terms: total width +Ignored Terms: total width, border-*-*-radius, corner-*-shape, corner-*-*-shape, corner-*-*, corner-*, box-shadow-*, border-*-clip Repository: w3c/csswg-drafts WPT Path Prefix: css/css-borders/ WPT Display: open 
+spec:css-overflow-3; type:value; for:overflow; text:visible
 spec:css-text-4; type:value; text:collapse
 spec:css-shapes-2; type:function; text:path()
 spec:css-shapes-2; type:property; text:shape-inside
+spec:dom; type: dfn; text: element;
 spec:geometry-1; type: dfn; text: width dimension
 spec:geometry-1; type: dfn; text: height dimension
 spec:geometry-1; type: dfn; text: x coordinate; for: rectangle
 spec:geometry-1; type: dfn; text: y coordinate; for: rectangle
 spec:geometry-1; type: dfn; text: rectangle
-spec:dom; type: dfn; text: element;

Introduction

+ The properties of this module deal with the decoration of the [=border area=]. + It also defines decorations that can be applied to the box. + +

+Module Interactions

+ This specification extends the parts related to borders and box decorations of CSS Backgrounds and Borders Module Level 3 [[CSS3BG]]. - It is currently a diff specification; - see [[CSS3BG]] for the rest of the features related to borders and box decorations. It provides specifications for the added 'corner-*-shape' and 'border-shape' properties, as well as logical shorthands for 'border-*-radius', 'box-shadow-*' longhands, and partial borders via the 'border-limit' and 'border-*-clip' properties. - Issue: Merge the Level 3 text into this draft. + All properties in this module apply to the ''::first-letter'' [=pseudo-element=]. + The border-radius properties also apply + to the ''::first-line'' [=pseudo-element=]. + The UA may (but is not required to) + apply the 'border-image' or 'box-shadow' properties to ''::first-line''. + The UA must not + apply the border-color/style/width properties + to ''::first-line''. + [[!CSS2]] + +

+Value Definitions

+ + This specification follows the CSS property definition conventions from [[!CSS2]] + using the value definition syntax from [[!CSS-VALUES-3]]. + Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]]. + 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]] + + In addition to the property-specific values listed in their definitions, + all properties defined in this specification + also accept the CSS-wide keywords as their property value. + For readability they have not been repeated explicitly.

Borders

- The border can either be a predefined style (solid line, double - line, dotted line, pseudo-3D border, etc.) or it can be an image. In - the former case, various properties define the style ('border-style'), - color ('border-color'), and thickness ('border-width') of the border. + The [=border=] can either be a predefined style + (solid line, double line, dotted line, pseudo-3D border, etc.) + or it can be an image. + In the former case, various properties define + the style ('border-style'), + color ('border-color'), + and thickness ('border-width') + of the border. border-image-gradient-zero-size-transform-crash.html @@ -74,13 +107,8 @@ Line Colors: the 'border-color' properties Animation type: see prose - 
-		Name: border-color
-		Value: [ <> | <> ]{1,4}
-
- - These properties set the foreground color of the border specified - by the 'border-style' properties. + These properties set the foreground color + of the [=border=] specified by the 'border-style' properties. The stripes defined by <> follow the shape of the border on the side to which they apply, @@ -107,7 +135,12 @@ Line Colors: the 'border-color' properties - 'border-color' is a shorthand for the four 'border-*-color' properties. + 
+		Name: border-color
+		Value: [ <> | <> ]{1,4}
+
+ + '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, @@ -141,6 +174,19 @@ Line Colors: the 'border-color' properties If only one value is given, it applies to both the start and end sides. + + animations/border-color-interpolation.html + border-image-displayed-with-transparent-border-color.html + color-mix-currentcolor-border-repaint-parent.html + color-mix-currentcolor-border-repaint.html + currentcolor-border-repaint-parent.html + inheritance.sub.html + parsing/border-color-computed.html + parsing/border-color-invalid.html + parsing/border-color-shorthand.html + parsing/border-color-valid.html + +

Line Patterns: the 'border-style' properties

@@ -156,6 +202,10 @@ Line Patterns: the 'border-style' properties Animation type: discrete + 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). + The [=flow-relative=] properties 'border-block-start-style', 'border-block-end-style', @@ -183,6 +233,110 @@ Line Patterns: the 'border-style' properties If only one value is given, it applies to both the start and end sides. + 
+	Name: border-style
+	Value: <<'border-top-style'>>{1,4}
+
+ + '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 <> keyword, where + 
<> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
+ + Values have the following meanings: + +
+
none +
+ 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 +
+ Same as ''border-style/none'', + but has different behavior in the border conflict resolution rules + for border-collapsed tables [[!CSS2]]. + +
dotted +
+ A series of round dots. + +
dashed +
+ A series of square-ended dashes. + +
solid +
+ A single line segment. + +
double +
+ 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 +
+ 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 +
+ Looks as if it were coming out of the canvas. + +
inset +
+ Looks as if the content on the inside of the border + is sunken into the canvas. + Treated as ''border-style/ridge'' in the + collapsing border model. [[!CSS2]] + +
outset +
+ Looks as if the content on the inside of the border + is raised out of the canvas. + Treated as ''border-style/groove'' in the + collapsing border model. [[!CSS2]] +
+ + Borders are drawn in front of the element’s background, + but behind the element’s content (in case it overlaps). + +
+ Examples of border styles + +
Example renderings of the predefined border styles.
+
+ + 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 ''border-style/groove'', ''border-style/ridge'', ''border-style/inset'', or ''border-style/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. + + + inheritance.sub.html + parsing/border-style-computed.html + parsing/border-style-invalid.html + parsing/border-style-shorthand.html + parsing/border-style-valid.html + +

Line Thickness: the 'border-width' properties

@@ -198,6 +352,17 @@ Line Thickness: the 'border-width' properties Animation Type: by computed value + These properties specify the thickness of the [=border=], + i.e. the border width. + Where + + 
<> = <> | thin | medium | thick
+ +

+ Negative values are invalid. + The thin, medium, and thick keywords + are equivalent to ''1px'', ''3px'', and ''5px'', respectively. + The [=flow-relative=] properties 'border-block-start-width', 'border-block-end-width', @@ -225,11 +390,61 @@ Line Thickness: the 'border-width' properties If only one value is given, it applies to both the start and end sides. - - borders-on-sub-unit-sized-elements.html - subpixel-borders-with-child-border-box-sizing.html - subpixel-borders-with-child.html - + 

+	Name: border-width
+	Value: <<'border-top-width'>>{1,4}
+
+ + '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. + + Note: Although the [=initial value|initial=] width is ''medium'', + the [=initial value|initial=] style is ''border-style/none''; + therefore the [=used value|used=] initial width is 0. + + + animations/border-bottom-width-composition.html + animations/border-image-width-composition.html + animations/border-image-width-interpolation.html + animations/border-left-width-composition.html + animations/border-right-width-composition.html + animations/border-top-width-composition.html + animations/border-width-interpolation.html + border-bottom-width-medium.html + border-bottom-width-thick.html + border-bottom-width-thin.html + border-left-width-medium.html + border-left-width-thick.html + border-left-width-thin.html + border-right-width-medium.html + border-right-width-thick.html + border-right-width-thin.html + border-top-width-medium.html + border-top-width-thick.html + border-top-width-thin.html + border-width-cssom.html + border-width-pixel-snapping-001-a.html + border-width-pixel-snapping-001-b.html + border-width-small-values-001-a.html + border-width-small-values-001-b.html + border-width-small-values-001-c.html + border-width-small-values-001-d.html + border-width-small-values-001-e.html + inheritance.sub.html + parsing/border-width-computed.html + parsing/border-width-invalid.html + parsing/border-width-shorthand.html + parsing/border-width-valid.html + + + borders-on-sub-unit-sized-elements.html + subpixel-borders-with-child-border-box-sizing.html + subpixel-borders-with-child.html +

Border Shorthand Properties

@@ -245,6 +460,11 @@ Border Shorthand Properties Animation Type: see individual properties + 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=]. + The [=flow-relative=] properties 'border-block-start', 'border-block-end', @@ -272,13 +492,315 @@ Border Shorthand Properties + 
+	Name: border
+	Value: <> || <> || <>
+
+ + + parsing/border-invalid.html + parsing/border-shorthand.html + parsing/border-valid.html + + + 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. + + 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. + + 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. + +
+ For example, the first rule below is equivalent to the set of five + rules shown after it: + + 
+		p { border: solid red }
+		p {
+		  border-top: solid red;
+		  border-right: solid red;
+		  border-bottom: solid red;
+		  border-left: solid red;
+		  border-image: none;
+		}
+
+
+ + Since, to some extent, the properties have overlapping functionality, + the order in which the rules are specified is important. + +
+ Consider this example: + 
+		blockquote {
+		  border-color: red;
+		  border-left: double;
+		  color: black
+		}
+
+ + In the above example, + the color of the left border is black, while the other borders are red. + This is due to 'border-left' setting the width, style, and color. + Since the color value is not given by the 'border-left' property, + it will be taken from the 'color' property. + The fact that the 'color' property is set after the 'border-left' property + is not relevant. +
+

Corners

+ The [=padding edge=] (inner border) radius is + the outer border radius minus the corresponding border thickness. + In the case where this results in a negative value, + the inner radius is zero. + (In such cases the center of the border’s inner curve might not coincide + with that of its outer curve.) + Likewise the [=content edge=] radius is + the [=padding edge=] radius minus the corresponding [=padding=], + or if that is negative, zero. + The border and padding thicknesses in the curved region + are thus interpolated from the adjoining sides, + and when two adjoining borders are of different thicknesses + the corner will show a smooth transition + between the thicker and thinner borders. + + All border styles (''border-style/solid'', ''border-style/dotted'', ''border-style/inset'', etc.) + follow the curve of the border. + +
+ The effect of rounded corners on unequal borders + +
+ The effect of a rounded corner when the two borders it connects + are of unequal thickness (left) + and the effect of a rounded corner on borders + that are thicker than the radius of the corner (right). +
+
+ + + Note: If the center of a corner's outer curve + is past an opposite [=padding edge=] + (in the [=border area=] of a side opposite the corner), + the inner curve will not be a full quarter ellipse. + +
+ + +
+ 
+					p { width: 70px; height: 70px; border: solid 30px;
+					border-color: orange orange silver silver;
+					border-top-right-radius: 100%; }
+
+ 		+ 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. +
+
+ Where the border-radius curve extends into the opposite sides' borders, + the arc of the padding edge is less than 90°. +
+
+ + The [=margin edge=], being outside the [=border edge=], + calculates its radius by adding the corresponding margin thickness + to each border radius. + However, in order to create a sharper corner when the border radius is small + (and thus ensure continuity between round and sharp corners), + when the [=border radius=] is less than the margin, + the margin is multiplied by the proportion 1 + (r-1)3, + where r is the ratio of the border radius to the margin, + in calculating the corner radii of the margin box shape. + + +

+Corner Clipping

+ + Although border images + are not affected by 'border-radius', + other effects that clip painting or event handling + to the [=border edge|border=], [=padding edge|padding=], or [=content edge|content=] edge + must clip to their respective curves. + For example, + backgrounds clip to the curve specified by 'background-clip', + '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 events to the curved [=border edge=], + etc. + + 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. + +
+ This example adds appropriate padding, + so that the contents do not overflow the corners. + Note that there is no border, + but the background will still have rounded corners. + + 
+		DIV {
+		    background: black;
+		    color: white;
+		    border-radius: 1em;
+		    padding: 1em }
+
+
+ +

+Color and Style Transitions

+ + 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=]). + + 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. + +
+ Illustration of the transition region on curved corners + +
+ Given these corner shapes, color and style transitions + must be contained within the green region. + In case D the rectangle defined by the border radii + does not include the center of the inner curve (which is a sharp corner), + so the transition region is expanded to include that corner. + Transitions may take up the entire transition region, + but are not required to: + For example, a gradient color transition between two solid border styles + might take up only the region bounded by + the tips of the outer radii and the tips of the inner radii + (represented in case D by the dark green region). +
+
+ +

+Overlapping Curves

+ + 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: + + Let f = min(Li/Si), + where i ∈ {top, right, bottom, left}, + Si is the sum of the two corresponding radii + of the corners on side i, + and Ltop = Lbottom = the width of the box, + and Lleft = Lright = the height of the box. + If f < 1, then all corner radii are reduced + by multiplying them by f. + + 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. + + 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. + +
+ For example, the borders A of the figure below + might be the result of + + 
+		box-sizing: border-box;
+		width: 6em;
+		height: 2.5em;
+		border-radius: 0.5em 2em 0.5em 2em
+
+ + The height (2.5em) is enough for the specified radii (0.5em plus 2.0em). + However, if the height is only 2em, + + 
+		box-sizing: border-box;
+		width: 6em;
+		height: 2em;
+		border-radius: 0.5em 2em 0.5em 2em
+
+ + all corners need to be reduced by a factor 0.8 to make them fit. + The used border radii thus are + 0.4em (instead of 0.5em) and 1.6em (instead of 2em). + See borders B in the figure. + +
+ [image: rectangle with two tiny rounded corners and two very large ones, on opposite corners] + +
+ These rounded corner might be the result of + ''width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em'' + for A; and ditto but with ''height: 2em'' for B. +
+
+
+ +

+Effect on Tables

+ + The 'border-radius' properties do apply to + ''display/table'', ''inline-table'', and ''table-cell'' boxes + in separated borders mode (''border-collapse: separate''). + When 'border-collapse' is ''border-collapse/collapse'', they have no effect. + + + ttwf-reftest-borderRadius.html + +

Corner Sizing: the 'border-*-*-radius' properties

- 
+	
 	Name: 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
 	Value: <>{1,2}
 	Initial: 0
@@ -290,6 +812,41 @@ Corner Sizing: the 'border-*-*-radius' properties
 	Animation Type: by computed value
 	

 
+	The two <> 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=].
+	Negative values are invalid.
+
+	

+		Diagram of the inscribed ellipse
+
+		

+			The two values of ''border-top-left-radius: 55pt 25pt''
+			define the curvature of the corner.
+		

+	

+
+	

+		This example draws ovals of 15em wide and 10em high:
+
+		
+		DIV.standout {
+		    width: 13em;
+		    height: 8em;
+		    border: solid black 1em;
+		    border-radius: 7.5em 5em }
+		

+	

+
 	The [=flow-relative=] properties
 	'border-start-start-radius',
 	'border-start-end-radius',
@@ -315,7 +872,7 @@ The 'border-top-radius', 'border-right-radius',
 'border-block-start-radius', 'border-block-end-radius',
 'border-inline-start-radius', 'border-inline-end-radius' shorthands
 
-	
+	
 		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: <>{1,2} [ / <>{1,2} ]?
@@ -372,23 +929,112 @@ The 'border-top-radius', 'border-right-radius',
 	tentative/parsing/border-top-radius-invalid.html
 	tentative/parsing/border-top-radius-valid.html
 
+
+	animations/border-bottom-left-radius-composition.html
+	animations/border-bottom-right-radius-composition.html
+	animations/border-radius-interpolation.html
+	animations/border-top-left-radius-composition.html
+	animations/border-top-right-radius-composition.html
+	border-bottom-left-radius-001.xht
+	border-bottom-left-radius-004.xht
+	border-bottom-left-radius-005.xht
+	border-bottom-left-radius-010.xht
+	border-bottom-left-radius-011.xht
+	border-bottom-left-radius-014.xht
+	border-bottom-right-radius-001.xht
+	border-bottom-right-radius-004.xht
+	border-bottom-right-radius-005.xht
+	border-bottom-right-radius-010.xht
+	border-bottom-right-radius-011.xht
+	border-bottom-right-radius-014.xht
+	border-radius-001.xht
+	border-radius-002.xht
+	border-radius-003.xht
+	border-radius-004.xht
+	border-radius-005.xht
+	border-radius-006.xht
+	border-radius-007.xht
+	border-radius-008.xht
+	border-radius-009.xht
+	border-radius-010.xht
+	border-radius-011.xht
+	border-radius-012.html
+	border-radius-013.html
+	border-radius-clip-001.html
+	border-radius-clip-002.htm
+	border-radius-clipping-002.html
+	border-radius-clipping-with-transform-001.html
+	border-radius-css-text.html
+	border-radius-dynamic-from-no-radius.html
+	border-radius-horizontal-value-is-zero.html
+	border-radius-shorthand-002.html
+	border-top-left-radius-001.xht
+	border-top-left-radius-004.xht
+	border-top-left-radius-005.xht
+	border-top-left-radius-010.xht
+	border-top-left-radius-011.xht
+	border-top-left-radius-014.xht
+	border-top-right-radius-001.xht
+	border-top-right-radius-004.xht
+	border-top-right-radius-005.xht
+	border-top-right-radius-010.xht
+	border-top-right-radius-011.xht
+	border-top-right-radius-014.xht
+	box-shadow-border-radius-001.html
+	css-border-radius-001.html
+	inheritance.sub.html
+	inner-border-non-renderable.html
+	parsing/border-radius-computed.html
+	parsing/border-radius-invalid.html
+	parsing/border-radius-valid.html
+	parsing/webkit-border-radius-valid.html
+
 
 

 Sizing All Corners At Once:
 The 'border-radius' shorthand

 
-	
+	
 		Name: border-radius
 		Value: <>{1,4} [ / <>{1,4} ]?
-		Initial: 0
-		Applies to: all elements, except table element when 'border-collapse' is ''collapse''
-		Inherited: no
-		Animation type: see individual properties
 	

 
-	See [[CSS3BG]].
+	The 'border-radius' shorthand sets all four 'border-*-radius' properties.
+	If values are given before and after the slash,
+	then the values before the slash set the horizontal radii
+	and the values after the slash set the vertical radii.
+	If there is no slash, then the values set the radii in both axes equally.
+	The four values for each radii are given in the order
+	top-left, top-right, bottom-right, bottom-left.
+	If bottom-left is omitted it is the same as top-right.
+	If bottom-right is omitted it is the same as top-left.
+	If top-right is omitted it is the same as top-left.
 
-

+	

+		
+		border-radius: 4em;
+		

+		is equivalent to
+		
+		border-top-left-radius:     4em;
+		border-top-right-radius:    4em;
+		border-bottom-right-radius: 4em;
+		border-bottom-left-radius:  4em;
+		

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

+		is equivalent to
+		
+		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;
+		

+	

+
+

 Corner Shaping: the 'corner-*-shape' properties

 
 	By default, non-zero 'border-radius' values
@@ -527,7 +1173,7 @@ Corner Shaping: the 'corner-*-shape' properties
 		corner-shape/corner-shape-video-border.html
 	
 
-	
+	
 		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: <>
 		Initial: round
@@ -551,7 +1197,7 @@ Corner Shaping: the 'corner-*-shape' properties
 	(i.e. patterned as corner-block-inline-shape).
 
 	
-		<> = ''round'' | ''scoop'' | ''bevel'' | ''notch'' | ''/square'' | ''squircle'' |
+		<> = ''corner-shape/round'' | ''corner-shape/scoop'' | ''corner-shape/bevel'' | ''corner-shape/notch'' | ''corner-shape/square'' | ''corner-shape/squircle'' |
 		                       <>
 		superellipse() = superellipse(<> | infinity | -infinity)
 	

@@ -696,7 +1342,7 @@ The 'corner-top-left', 'corner-top-right',
 'corner-start-start', 'corner-start-end',
 'corner-end-start', 'corner-end-end' shorthands
 
-	
+	
 		Name: corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right,
 			corner-start-start, corner-start-end, corner-end-start, corner-end-end
 		Value: <<'border-top-left-radius'>> || <<'corner-top-left-shape'>>
@@ -720,7 +1366,7 @@ The 'corner-top', 'corner-right',
 'corner-block-start', 'corner-block-end',
 'corner-inline-start', 'corner-inline-end' shorthands
 
-	
+	
 		Name: corner-top, corner-right, corner-bottom, corner-left,
 			corner-block-start, corner-block-end, corner-inline-start, corner-inline-end
 		Value: <<'border-top-radius'>> || <<'corner-top-shape'>>
@@ -981,6 +1627,647 @@ To interpolate a [=superellipse parameter=] |s| to an interpolation value betwee
 	corner-shape/corner-shape-interpolation.html
 
 
+

+Border Images

+
+	Authors can specify an image to be used in place of the border styles.
+	In this case, the border's design is taken from the sides and corners
+	of an image specified with 'border-image-source',
+	whose pieces may be sliced, scaled, and stretched in various ways
+	to fit the size of the [=border image area=].
+	The border-image properties do not affect layout:
+	layout of the box, its content, and surrounding content
+	is based on the 'border-width' and 'border-style' properties only.
+
+	

+		This example creates
+		a top and bottom border consisting of a whole number of orange diamonds
+		and a left and right border of a single, stretched diamond.
+		The corners are diamonds of a different color.
+		The image to tile is as follows.
+		Apart from the diamonds, it is transparent:
+
+		Tile for border
+
+		The image is 81 by 81 pixels and has to be divided into 9 equal parts.
+		The style rules could thus be as follows:
+
+		
+		DIV {
+		  border: double orange 1em;
+		  border-image: url("border.png") 27 round stretch;
+		 }
+		

+
+		The result, when applied to a DIV of 12 by 5em,
+		will be similar to this:
+
+		element with a diamond border
+	

+
+

+	This shows a more complicated example,
+	demonstrating how the border image corresponds to the fallback border-style
+	but can also extend beyond the border area.
+	The border image is a wavy green border with an extended corner effect:
+
+	

+		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.
+
+		

+			The 'border-image-source' image,
+			with the four 'border-image-slice' cuts at 124px
+			dividing the image into nine parts.
+		

+	

+
+	The rest of the border properties then interact
+	to lay out the tiles as follows:
+
+	

+		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.
+
+			

+				Diagram of all border-image properties and how they interact,
+				and showing the rendering with and without the border-image in effect.
+			

+		

+
+		Here, even though the 'border-width' is 12px,
+		the 'border-image-width' property computes to 124px.
+		The [=border image area=] is then outset 31px from the [=border box=]
+		and into the [=margin area=].
+		If the border-image fails to load
+		(or if border images are not supported by the UA),
+		the fallback rendering uses a green double border.
+	

+
+	

+		Notice that the 'border' shorthand resets 'border-image'.
+		This makes it easy to turn off or reset all border effects:
+
+		
+		.notebox {
+		  border: double orange;
+		  /* must set 'border' shorthand first, otherwise it erases 'border-image' */
+		  border-image: url("border.png") 30 round;
+		  /* but other 'border' properties can be set after */
+		  border-width: thin thick;
+		}
+		...
+		.sidebar .notebox {
+		  box-shadow: 0 0 5px gray;
+		  border-radius: 5px;
+		  border: none; /* turn off all borders */
+		  /* 'border' shorthand resets 'border-image' */
+		}
+		

+	

+
+

+Image Source: the 'border-image-source' property

+
+	
+	Name: border-image-source
+	Value: none | <>
+	Initial: none
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: N/A
+	Computed value: the keyword ''border-image-source/none'' or the computed <>
+	Animation type: discrete
+	

+
+	
+		animations/border-image-source-interpolation.html
+		css3-border-image-source.html
+		parsing/border-image-source-computed.sub.html
+		parsing/border-image-source-invalid.html
+		parsing/border-image-source-valid.html
+	
+
+	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 ''border-image-source/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.
+
+

+Image Slicing: the 'border-image-slice' property

+
+	
+	Name: border-image-slice
+	Value: [<> | <>]{1,4} && fill?
+	Initial: 100%
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: refer to size of the border image
+	Computed value: four values, each either a number or percentage; plus a ''fill'' keyword if specified
+	Animation type: by computed value
+	

+
+	
+		animations/border-image-slice-composition.html
+		animations/border-image-slice-interpolation-stability.html
+		animations/border-image-slice-interpolation.html
+		border-image-slice-001.xht
+		border-image-slice-002.xht
+		border-image-slice-003.xht
+		border-image-slice-004.htm
+		border-image-slice-005.htm
+		border-image-slice-006.htm
+		border-image-slice-007.htm
+		border-image-slice-fill-001.html
+		border-image-slice-fill-002.html
+		border-image-slice-fill-003.html
+		border-image-slice-percentage.html
+		border-image-slice-shorthand-reset.html
+		parsing/border-image-slice-computed.html
+		parsing/border-image-slice-invalid.html
+		parsing/border-image-slice-valid.html
+	
+
+	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.)
+
+	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.
+
+	

+		
<>
+		

+			Percentages are relative to the size of the image:
+			the width of the image for the horizontal offsets,
+			the height for vertical offsets.
+
+		
<>
+		

+			Numbers represent pixels in the image
+			(if the image is a raster image)
+			or vector coordinates
+			(if the image is a vector image).
+
+		
fill
+		

+			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.)
+	

+
+	Negative values are invalid.
+	Computed values larger than the size of the image are interpreted as ''100%''.
+
+	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.
+
+	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=].
+
+	

+		Diagram: two horizontal cuts and two vertical cuts through an image
+
+		

+			Diagram illustrating the cuts corresponding to the value ''25% 30% 12% 20%''
+		

+	

+
+

+Drawing Areas: the 'border-image-width' property

+
+	
+	Name: border-image-width
+	Value: [ <> | <> | auto ]{1,4}
+	Initial: 1
+	Applies to: All elements,
+		except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: Relative to width/height of the [=border image area=]
+	Computed value: four values,
+		each either a number,
+		the keyword ''border-image-width/auto'',
+		or a computed <> value
+	Animation type: by computed value
+	

+
+	
+		border-image-width-001.htm
+		border-image-width-005.xht
+		border-image-width-006.xht
+		border-image-width-007.xht
+		border-image-width-008.html
+		border-image-width-009.html
+		border-image-width-should-extend-to-padding.html
+		parsing/border-image-width-computed.html
+		parsing/border-image-width-invalid.html
+		parsing/border-image-width-valid.html
+	
+
+	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'.
+
+	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:
+
+	

+		
<>
+		

+			Percentages refer to the size of the [=border image area=]:
+			the width of the area for horizontal offsets,
+			the height for vertical offsets.
+
+		
<>
+		

+			Numbers represent multiples of the corresponding computed
+			border-width.
+
+		
auto
+		

+			If ''border-image-width/auto'' is specified
+			then the used 'border-image-width' is
+			the [=natural size|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.
+
+	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.
+
+

+Edge Overhang: the 'border-image-outset' property

+
+	
+	Name: border-image-outset
+	Value: [ <> | <> ]{1,4}
+	Initial: 0
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: N/A
+	Computed value: four values, each a number or absolute length
+	Animation type: by computed value
+	

+
+	
+		animations/border-image-outset-composition.html
+		animations/border-image-outset-interpolation.html
+		border-image-outset-003.html
+		parsing/border-image-outset-computed.html
+		parsing/border-image-outset-invalid.html
+		parsing/border-image-outset-valid.html
+	
+
+	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.
+
+	

+		
<>
+		

+			Represents an outset of the specified length.
+
+		
<>
+		

+			Represents an outset of the specified multiple of
+			the corresponding computed border-width.
+	

+
+	Negative values are invalid.
+
+	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.
+
+	Note: Even though they never cause a scrolling mechanism,
+	outset images may still be clipped by an ancestor or by the viewport.
+
+

+Image Tiling: the 'border-image-repeat' property

+
+	
+	Name: border-image-repeat
+	Value: [ stretch | repeat | round | space ]{1,2}
+	Initial: stretch
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: N/A
+	Computed value: two keywords, one per axis
+	Animation type: discrete
+	

+
+	
+		animations/discrete-no-interpolation.html
+		border-image-repeat-002.htm
+		border-image-repeat-004.htm
+		border-image-repeat-005.html
+		border-image-repeat-1.html
+		border-image-repeat-repeat-001.html
+		border-image-repeat-round-003.html
+		border-image-repeat-round-1.html
+		border-image-repeat-round-2.html
+		border-image-repeat-round-stretch-001.html
+		border-image-repeat-round.html
+		border-image-repeat-space-011.html
+		border-image-repeat-space-1.html
+		border-image-repeat-space-10.html
+		border-image-repeat-space-2.html
+		border-image-repeat-space-3.html
+		border-image-repeat-space-4-ref-1.html
+		border-image-repeat-space-4.html
+		border-image-repeat-space-5-ref-1.html
+		border-image-repeat-space-5.html
+		border-image-repeat-space-6.html
+		border-image-repeat-space-7.html
+		border-image-repeat-space-8.html
+		border-image-repeat-space-9.html
+		border-image-repeat-stretch-round-001.html
+		border-image-repeat_repeatnegx_none_50px.html
+		css3-border-image-repeat-repeat.html
+		css3-border-image-repeat-stretch.html
+		parsing/border-image-repeat-computed.html
+		parsing/border-image-repeat-invalid.html
+		parsing/border-image-repeat-valid.html
+	
+
+	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

+		

+			The image is stretched to fill its corresponding [=region=].
+		
repeat

+		

+			The image is tiled (repeated) to fill its corresponding [=region=].
+		
round

+		

+			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

+		

+			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.
+	

+
+	The exact process for scaling and tiling the border-image parts
+	is given in the section below.
+
+

+Drawing the Border Image

+
+	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. 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=].
+
+		
    • 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. Scale to 'border-image-repeat'.
+		
      
+		
    • If the first keyword is ''border-image-repeat/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.
+
+		
    • If the first keyword is ''border-image-repeat/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 ''background-repeat/round'' in the 'background-repeat' property.
+
+		
    • If the first keyword is ''border-image-repeat/repeat'' or ''border-image-repeat/space'',
+			the top, middle, and bottom images are not changed any further.
+
+		
    • The effects of ''border-image-repeat/stretch'', ''border-image-repeat/round'', ''border-image-repeat/repeat'', and ''border-image-repeat/space''
+			for the second keyword are analogous,
+			acting on the height of the left, middle and right images.
+		
    
+
+	
  3. Position the first tile.
+		
      
+		
    • If the first keyword is ''border-image-repeat/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=].
+
+		
    • If the second keyword is ''border-image-repeat/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=].
+		
    
+
+	
  4. Tile and draw.
+		
      
+		
    • The images are then tiled to fill their respective regions.
+
+		
    • In the case of ''border-image-repeat/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.
+
+		
    • The images are drawn at the same stacking level as normal borders:
+			immediately in front of the background layers.
+
+		
    • The middle image is not drawn
+			unless ''fill'' was specified for 'border-image-source'.
+		
    
+	

+
+

+Border Image Shorthand: the 'border-image' property

+
+	
+	Name: border-image
+	Value: <<'border-image-source'>> || <<'border-image-slice'>> [ / <<'border-image-width'>> | / <<'border-image-width'>>? / <<'border-image-outset'>> ]? || <<'border-image-repeat'>>
+	Initial: See individual properties
+	Applies to: See individual properties
+	Inherited: no
+	Percentages: N/A
+	Computed value: See individual properties
+	Animation Type: See individual properties
+	

+
+	
+		border-image-002.html
+		border-image-003.html
+		border-image-004.html
+		border-image-006.html
+		border-image-007.html
+		border-image-011.html
+		border-image-012.html
+		border-image-013.html
+		border-image-017.xht
+		border-image-018.xht
+		border-image-019.xht
+		border-image-020.xht
+		border-image-calc.html
+		border-image-image-type-001.htm
+		border-image-image-type-002.htm
+		border-image-image-type-003.htm
+		border-image-image-type-004.htm
+		border-image-image-type-005.htm
+		border-image-round-and-stretch.html
+		border-image-shorthand-001.htm
+		border-image-shorthand-002.htm
+		border-image-shorthand-003.htm
+		border-image-space-001.html
+		parsing/border-image-invalid.html
+		parsing/border-image-shorthand.sub.html
+		parsing/border-image-valid.html
+	
+
+	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=].
+
+
Effect on Tables

+
+	The 'border-image' properties apply
+	to the border of tables and inline tables
+	that have 'border-collapse' set to ''border-collapse/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]]).
+
+	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.
+
 

 Partial borders

 
@@ -1325,7 +2612,7 @@ The 'border-clip' properties
 	tentative/parsing/border-clip-valid.html
 
 
-

+

 Drop Shadows

 
 

@@ -1545,6 +2832,173 @@ Drop Shadows Shorthand: the 'box-shadow' property

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

 
+

+Shadow Shape, Spread, and Knockout

+
+	An [=outer box-shadow=] casts a shadow
+	as if the border-box of the element were opaque.
+	Assuming a spread distance of zero, its perimeter has
+	the exact same size and shape as the border box.
+	The shadow is drawn outside the border edge only:
+	it is clipped inside the border-box of the element.
+
+	An [=inner box-shadow=] casts a shadow
+	as if everything outside the padding edge were opaque.
+	Assuming a spread distance of zero, its perimeter has
+	the exact same size and shape as the padding box.
+	The shadow is drawn inside the padding edge only:
+	it is clipped outside the padding box of the element.
+
+	If a [=spread distance=] is defined,
+	the shadow perimeter defined above
+	is expanded outward (for [=outer box-shadows=])
+	or contracted inward (for [=inner box-shadows=])
+	by outsetting (insetting, for inner shadows)
+	the shadow's straight edges by the [=spread distance=]
+	(and flooring the resulting width/height at zero).
+
+	

+		Below are some examples of an orange box with a blue border
+		being given a drop shadow.
+
+		
+			
+				
+				
+				
+				
+				

+					

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

+						
+					A round-cornered box with a light gray shadow the same shape
+					          as the border box offset 10px to the right and 10px down
+					          from directly underneath the box.
+				
+					A square-cornered box with a light gray shadow the same shape
+					          as the border box offset 10px to the right and 10px down
+					          from directly underneath the box.
+			

+					

+					box-shadow:
+					  rgba(0,0,0,0.4)
+					  10px 10px
+					  inset
+					

+						
+					A round-cornered box with a light gray shadow the inverse shape
+					          of the padding box filling 10px in from the top and left edges
+					          (just inside the border).
+				
+					A square-cornered box with a light gray shadow the inverse shape
+					          of the padding box filling 10px in from the top and left edges
+					          (just inside the border).
+			

+					

+					box-shadow:
+					  rgba(0,0,0,0.4)
+					  10px 10px 0
+					  10px /* spread */
+					

+						
+					A round-cornered box with a light gray shadow the same shape
+					          as the box but 20px taller and wider and offset so that the
+					          top and left edges of the shadow are directly underneath the
+					          top and left edges of the box.
+				
+					A square-cornered box with a light gray shadow the same shape
+					          as the box but 20px taller and wider and offset so that the
+					          top and left edges of the shadow are directly underneath the
+					          top and left edges of the box.
+			

+					

+					box-shadow:
+					  rgba(0,0,0,0.4)
+					  10px 10px 0
+					  10px /* spread */
+					  inset
+					

+						
+					A round-cornered box with a light gray shadow the inverse shape
+					          of the box but 20px narrower and shorter filling 20px in from
+					          the top and left edges (just inside the border).
+				
+					A round-cornered box with a light gray shadow the inverse shape
+					          of the box but 20px narrower and shorter filling 20px in from
+					          the top and left edges (just inside the border).
+		

+	

+
+	To preserve the box's shape when spread is applied,
+	the corner radii of the shadow are also increased (decreased, for inner shadows)
+	from the border-box (padding-box) radii by adding (subtracting)
+	the [=spread distance=] (and flooring at zero).
+	However, in order to create a sharper corner when the border radius is small
+	(and thus ensure continuity between round and sharp corners),
+	when the [=border radius=] is less than the [=spread distance=]
+	(or in the case of an inner shadow,
+	less than the absolute value of a negative [=spread distance=]),
+	the [=spread distance=]
+	is first multiplied by the proportion 1 + (r-1)3,
+	where r is the ratio of the border radius to the [=spread distance=],
+	in calculating the corner radii of the spread shadow shape.
+	For example, if the border radius is 10px and the [=spread distance=] is 20px (r = .5),
+	the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)3) = 27.5px
+	rather than 30px.
+	This adjustment is applied independently to the radii in each dimension.
+
+	The 'border-image' does not affect the shape of the box-shadow.
+
+

+Blurring Shadow Edges

+
+	A non-zero [=blur radius=] indicates
+	that the resulting shadow should be blurred,
+	such as by a Gaussian filter.
+	The exact algorithm is not defined;
+	however the resulting shadow must approximate
+	(with each pixel being within 5% of its expected value)
+	the image that would be generated by applying to the shadow
+	a Gaussian blur with a standard deviation equal to half the blur radius.
+
+	Note: This means for a long, straight shadow edge,
+	the blur radius will create a visibly apparent color transition
+	approximately the twice length of the blur radius
+	that is perpendicular to and centered on the shadow's edge,
+	and that ranges
+	from almost the full shadow color at the endpoint inside the shadow
+	to almost fully transparent at the endpoint outside it.
+
 

 Layering, Layout, and Other Details

 
@@ -1554,7 +3008,7 @@ Layering, Layout, and Other Details
 	with 'box-shadow-offset' as the [=coordinating list base property=].
 	See [[css-values-4#linked-properties]].
 
-	
The shadow effects are applied front-to-back:
+	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.
@@ -1563,13 +3017,13 @@ Layering, Layout, and Other Details
 	and the inner shadows of an element are drawn immediately above the background of that element
 	(below the borders and border image, if any).
 
-	
Unless otherwise specified, drop shadows are only applied to the [=principal box=].
+	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'.
 
-	
Shadows do not trigger scrolling or increase the size of the scrollable area.
+	Shadows do not trigger scrolling or increase the size of the scrollable area.
 
-	
Outer shadows have no effect on internal table elements in the collapsing border model.
+	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,
@@ -1579,11 +3033,11 @@ Layering, Layout, and Other Details
 

 Border Shaping

 
-While 'corner-shape' and 'border-radius' allow some expressiveness to styling a border,
-they still work with the assumption that the border is rectangular.
+	While 'corner-shape' and 'border-radius' allow some expressiveness to styling a border,
+	they still work with the assumption that the border is rectangular.
 
-The 'border-shape' function augments these capabilities,
-by enabling the author to use any [=basic shape=] to specify the path of the border.
+	The 'border-shape' function augments these capabilities,
+	by enabling the author to use any [=basic shape=] to specify the path of the border.
 
 

 The 'border-shape' property

@@ -1657,8 +3111,10 @@ Changes since the 
 Additions since [[CSS3BG]]
@@ -1674,7 +3130,7 @@ Additions since [[CSS3BG]]
 

 Acknowledgments

 
-	
In addition to the many contributors to the [[CSS1]], [[CSS21]],
+	
In addition to the many contributors to the [[CSS1]], [[CSS2]],
 	and [[CSS3BG]] predecessors to this module,
 	the editors would like to thank
 	Tab Atkins,
diff --git a/css-borders-4/images/partial-curve.png b/css-borders-4/images/partial-curve.png
new file mode 100644
index 00000000000..6ee25d544fb
Binary files /dev/null and b/css-borders-4/images/partial-curve.png differ