Overview.bs

<pre class='metadata'>
Title: CSS Borders and Box Decorations Module Level 4
Shortname: css-borders
Level: 4
Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-borders-4/
Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/, w3cid 52258
Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 64937
Editor: Noam Rosenthal, Google, w3cid 121539
Abstract: This module contains the features of CSS relating to the borders and decorations of boxes on the page.
Ignored Terms: total width
Warning: Not Ready
</pre>

<pre class="link-defaults">
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: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;
</pre>

<link rel="stylesheet" href="style.css" />

<h2 id="intro">
Introduction</h2>

	Issue: This module is currently maintained as a diff against
	the parts related to borders and box decorations of
	CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
	We will fold in the text once it’s all formatted up and in CR again,
	as this will reduce the effort of keeping them in sync
	(source diffs will be accurate in reflecting the differences).

<h2 id="borders">
Borders</h2>

	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.

<h3 id="border-color" oldids="the-border-color">
Line Colors: the 'border-color' properties</h3>

	<pre class="propdef">
	Name: border-top-color, border-right-color, border-bottom-color, border-left-color, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
	Value: <<color>> | <<image-1D>>
	Initial: currentcolor
	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
	Inherited: no
	Logical property group: border-color
	Percentages: N/A
	Computed Value: the computed color and/or a one-dimensional image function
	Animation type: see prose
	</pre>

	<pre class="propdef shorthand">
		Name: border-color
		Value: [ <<color>> | <<image-1D>> ]{1,4}
	</pre>

	These properties set the foreground color of the border specified
	by the 'border-style' properties.

	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.

	<div class="example">
		Using multiple colors for each side:

		<pre class=lang-css>
		.foo {
			border: 30px solid;
			border-color: stripes(<span class="swatch" tabIndex="0" style="--color: dodgerblue"></span>dodgerblue, <span class="swatch" tabIndex="0" style="--color: skyblue"></span>skyblue) stripes(<span class="swatch" tabIndex="0" style="--color: yellow"></span>yellow, <span class="swatch" tabIndex="0" style="--color: gold"></span>gold) stripes(<span class="swatch" tabIndex="0" style="--color: lightgreen"></span>lightgreen, <span class="swatch" tabIndex="0" style="--color: limegreen"></span>limegreen) stripes(<span class="swatch" tabIndex="0" style="--color: indianred"></span>indianred, <span class="swatch" tabIndex="0" style="--color: orange"></span>orange);
		}
		</pre>

		Sample rendering:

		<img src="images/multicolor-border.png" alt="">

		The same border colors with ''border-style: dotted'':

		<img src="images/multicolor-border-dotted.png" alt="">
	</div>

	'border-color' is a shorthand for the four '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'.

	<pre class="propdef shorthand">
	Name: border-block-color, border-inline-color
	Value: <<'border-top-color'>>{1,2}
	</pre>

	These two <a>shorthand properties</a> set the
	'border-block-start-color' &amp; 'border-block-end-color'
	and
	'border-inline-start-color' &amp; 'border-inline-end-color',
	respectively.
	The first value represents the <a>start</a> side color,
	and the second value represents the <a>end</a> side color.
	If only one value is given,
	it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-style" oldids="the-border-style">
Line Patterns: the 'border-style' properties</h3>

	<pre class="propdef">
	Name: border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
	Value: <<line-style>>
	Initial: none
	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
	Inherited: no
	Logical property group: border-style
	Percentages: N/A
	Computed value: specified keyword
	Animation type: discrete
	</pre>

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

	<pre class="propdef shorthand">
	Name: border-block-style, border-inline-style
	Value: <<'border-top-style'>>{1,2}
	</pre>

	These two <a>shorthand properties</a> set the
	'border-block-start-style' &amp; 'border-block-end-style'
	and
	'border-inline-start-style' &amp; 'border-inline-end-style',
	respectively.
	The first value represents the <a>start</a> side style,
	and the second value represents the <a>end</a> side style.
	If only one value is given,
	it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-width" oldids="the-border-width">
Line Thickness: the 'border-width' properties</h3>

	<pre class="propdef">
	Name: border-top-width, border-right-width, border-bottom-width, border-left-width, border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
	Value: <<line-width>>
	Initial: medium
	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
	Inherited: no
	Logical property group: border-width
	Percentages: N/A
	Computed value: absolute length, [=snapped as a border width=]; zero if the border style is ''border-style/none'' or ''border-style/hidden''
	Animation Type: by computed value
	</pre>

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

	<pre class="propdef shorthand">
	Name: border-block-width, border-inline-width
	Value: <<'border-top-width'>>{1,2}
	</pre>

	These two <a>shorthand properties</a> set the
	'border-block-start-width' &amp; 'border-block-end-width'
	and
	'border-inline-start-width' &amp; 'border-inline-end-width',
	respectively.
	The first value represents the <a>start</a> side width,
	and the second value represents the <a>end</a> side width.
	If only one value is given,
	it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-shorthands" oldids="the-border-shorthands">
Border Shorthand Properties</h3>

	<pre class="propdef shorthand">
	Name: border-top, border-right, border-bottom, border-left, border-block-start, border-block-end, border-inline-start, border-inline-end
	Value: <<line-width>> || <<line-style>> || <<color>>
	Initial: See individual properties
	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
	Inherited: no
	Percentages: N/A
	Computed value: see individual properties
	Animation Type: see individual properties
	</pre>

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

	<pre class="propdef shorthand">
	Name: border-block, border-inline
	Value: <<'border-block-start'>>
	</pre>

	These two <a>shorthand properties</a> set the
	'border-block-start' &amp; 'border-block-end'
	or
	'border-inline-start' &amp; 'border-inline-end',
	respectively,
	both to the same style.

	<!-- intentionally cannot set two sides independently;
		see discussion in https://github.com/w3c/csswg-drafts/issues/3519 -->

<h2 id="corners">
Corners</h2>

<h3 id="border-radius" oldids="the-border-radius">
Corner Sizing: the 'border-*-*-radius' properties</h3>

	<pre class=propdef>
	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: <<length-percentage [0,&infin;]>>{1,2}
	Initial: 0
	Applies to: all elements (but see prose)
	Inherited: no
	Logical property group: border-radius
	Percentages: Refer to corresponding dimension of the <a>border box</a>.
	Computed value: pair of computed <<length-percentage>> values
	Animation Type: by computed value
	</pre>

	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-<var>block</var>-<var>inline</var>-radius').

<h3 id="corner-sizing">
Corner Sizing Shorthands: the 'border-radius' and 'border-*-radius' shorthand properties</h3>

<h4 id="corner-sizing-side-shorthands">
Sizing The Corners Of One Side:
The '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' shorthands</h4>

	<pre class=propdef>
		Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius,
			border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
		Value: <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]?
		Initial: 0
		Applies to: all elements (but see prose)
		Inherited: no
		Percentages: Refer to corresponding dimension of the <a>border box</a>.
		Computed value: see individual properties
		Animation type: see individual properties
	</pre>

	<p>The 'border-*-radius' shorthands set the two 'border-*-*-radius'
	longhand properties of the related side. If values are given before
	and after the slash, then the values before the slash set the
	horizontal radius and the values after the slash set the vertical radius.
	If there is no slash, then the values set both radii equally.
	The two values for the radii are given in the order
	top-left, top-right for 'border-top-radius',
	top-right, bottom-right for 'border-right-radius',
	bottom-left, bottom-right for 'border-bottom-radius',
	top-left, bottom-left for 'border-left-radius',
	start-start, start-end for 'border-block-start-radius',
	end-start, end-end for 'border-block-end-radius'
	start-start, end-start for 'border-inline-start-radius',
	and start-end, end-end for 'border-inline-end-radius'.
	If the second value is omitted it is copied from the first.

<h4 id="corner-sizing-shorthand">
Sizing All Corners At Once:
The 'border-radius' shorthand</h4>

	<pre class="propdef">
		Name: border-radius
		Value: <<length-percentage [0,&infin;]>>{1,4} [ / <<length-percentage [0,&infin;]>>{1,4} ]?
		Initial: 0
		Applies to: all elements, except table element when 'border-collapse' is ''collapse''
		Inherited: no
		Animation type: see individual properties
	</pre>

	See [[CSS3BG]].

<h3 id=corner-shaping>
Corner Shaping: the 'corner-shape' property</h3>

	By default, non-zero 'border-radius' values
	define a quarter-ellipse <dfn export>corner shape</dfn>
	that rounds the affected corners,
	filling the <dfn export>corner area</dfn>
	defined by the 'border-radius' for that corner.
	However in some cases, other [=corner shapes=] are desired.
	The 'corner-shape' property (and its longhands)
	specify exactly what [=corner shapes=] a box will use
	for the region defined by its 'border-radius' values.

	The different [=corner shapes=] can all be expressed
	as different parameters to a <em>superellipse</em>.
	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.

	<details class=note>
		<summary>How does a superellipse work?</summary>

		A unit circle is defined by the equation:

		<figure>
			<math display=block>
				<mrow>
					<msup>
						<mi>x</mi>
						<mn>2</mn>
					</msup>
					<mo>+</mo>
					<msup>
						<mi>y</mi>
						<mn>2</mn>
					</msup>
					<mo>=</mo>
					<mn>1</mn>
				</mrow>
			</math>
		</figure>

		The circle is made from all points (x,y) that satisfy the equation.
		A given ellipse can then be produced by scaling this shape
		in the X and/or Y axis.

		The unit superellipse equation just changes the <sup>2</sup> exponent
		into a variable.
		For this spec's purposes, we'll write it as 2<sup>K</sup>:

		<figure>
			<math display=block>
				<mrow>
					<msup>
						<mi>x</mi>
						<msup>
							<mn>2</mn>
							<mi>K</mi>
						</msup>
					</msup>
					<mo>+</mo>
					<msup>
						<mi>y</mi>
						<msup>
							<mn>2</mn>
							<mi>K</mi>
						</msup>
					</msup>
					<mo>=</mo>
					<mn>1</mn>
				</mrow>
			</math>
		</figure>

		The |K| in this equation is the ''superellipse()'' argument.

		|K| can be any value;
		setting |K| to 1 gives the standard circle/ellipse equation,
		but other values define the entire family of superellipse curves:

		* Values larger than 1 make it more "square":
			the traditional "squircle" uses a |K| of 2,
			and a |K| of infinity is a perfect square.
			(A |K| of only 10 is already nearly indistinguishable from a square;
			it scales very quickly.)

		* Values between 0 and 1 make it "flatter";
			when |K| is 0 it's a diamond with perfectly flat sides.

		* Negative values define concave curves,
			roughly opposite of what you get with positive values:
			a |K| of -1 gives a nearly elliptical "scoop"
			that's roughly the opposite of a |K| of 1,
			a |K| of -2 gives a "squircle" scoop,
			a |K| of negative infinity gives a square scoop,
			etc.

		(Note that most literature on superellipses
		will write the equation with a simpler <math display=inline><msup><mi>x</mi><mi>K</mi></msup></math> exponent.
		The <math display=inline><msup><mi>x</mi><msup><mn>2</mn><mi>K</mi></msup></msup></math> form
		was chosen here
		to make the argument ranges easier to reason about:
		all possible values are valid,
		the symmetrical shapes are just positive/negative,
		the "middle" bevel is 0,
		etc.)
	</details>

	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.

<h4 id=corner-shape-shorthand>
The 'corner-shape' Shorthand</h4>

	<pre class="propdef shorthand">
		Name: corner-shape
		Value: <<corner-shape-value>>{1,4}
		Initial: round
		Applies to: all elements where 'border-radius' can apply
		Inherited: no
		Animation type: see individual properties
	</pre>

	The 'corner-shape' property specifies the shape of the box's corners,
	within the region specified by 'border-radius'.

	<pre class=prod>
		<dfn><<corner-shape-value>></dfn> = <l>''round''</l> | <l>''scoop''</l> | <l>''bevel''</l> | <l>''notch''</l> | <l>''<corner-shape-value>/square''</l> | <l>''squircle''</l> |
		                       <<superellipse()>>
		<dfn>superellipse()</dfn> = superellipse(<<number [-&infin;,&infin;]>> | infinity | -infinity)
	</pre>

	<dl dfn-type="value" dfn-for="<corner-shape-value>, corner-shape">
		<dt><dfn>round</dfn>
		<dd>The [=corner shape=] is a quarter of a convex ellipse.
			Equivalent to ''superellipse(1)''.

			Note: This is the initial value of 'corner-shape' properties,
			as it was the behavior of 'border-radius'
			before 'corner-shape' existed.

		<dt><dfn>squircle</dfn>
		<dd>The [=corner shape=] is a quarter of a "squircle",
			a convex curve between ''corner-shape/round'' and ''corner-shape/square''.
			Equivalent to ''superellipse(2)''.

		<dt><dfn>square</dfn>
		<dd>The [=corner shape=] is a convex 90deg angle.
			Equivalent to ''superellipse(infinity)''.

			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.

		<dt><dfn>bevel</dfn>
		<dd>The [=corner shape=] is a straight diagonal line,
			neither convex nor concave.
			Equivalent to ''superellipse(0)''.

		<dt><dfn>scoop</dfn>
		<dd>The [=corner shape=] is a concave quarter-ellipse.
			Equivalent to ''superellipse(-1)''.

		<dt><dfn>notch</dfn>
		<dd>The [=corner shape=] is a concave 90deg angle.
			Equivalent to ''superellipse(-infinity)''.

		<dt><dfn>superellipse(K)</dfn>
		<dd>The [=corner shape=] is a quarter of a superellipse.
			The argument |K| is the <dfn dfn for>superellipse parameter</dfn>,
			and it defines a superellipse
			using an exponent of 2<sup>K</sup>.

			See the note in [[#corner-shaping]] for an explanation
			of the mathematical definition of a superellipse,
			and what various K values mean.
			See [[#corner-shape-rendering]] for precise details
			of how the superellipse is computed and rendered.
	</dl>

	<div class=example>

		<figure>
			<img src="images/superellipse-param.svg" width="480" height="360">
			<figcaption>
				Different ''superellipse()'' values for the top right corner: infinity, 1, 0, -1, and -infinity.
			</figcaption>
		</figure>
	</div>

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

	The curve specified by 'corner-shape'
	defines the <em>outer</em> 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' 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.


<h4 id=corner-shape-shorthand>
The 'corner-*-shape' Shorthands And Longhands</h4>

	<pre class=propdef>
	Name: corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
	Value: <<corner-shape-value>>
	Initial: round
	Applies to: all elements where 'border-radius' can apply
	Inherited: no
	Logical property group: corner-shape
	Computed value: the corresponding ''superellipse()'' value
	Animation Type: see [=superellipse interpolation=]
	</pre>

	The 'corner-*-*-shape' longhand properties
	set the corner shape for the given corner.

	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 <css>start</css>/<css>end</css> gives the block axis side,
	and the second the inline-axis side
	(i.e. patterned as <css>corner-<var ignore>block</var>-<var ignore>inline</var>-shape</css>).

	<pre class="propdef shorthand">
	Name: corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape,
		corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape
	Value: <<corner-shape-value>>{1,2}
	</pre>

	The 'corner-*-shape'/etc shorthands set the two 'corner-*-*-shape'
	properties of the related side.
	If only one value is given,
	the second value defaults to the same value.

	For the physical shorthands ('corner-top-shape', etc),
	the values are either in left/right order, or top/bottom order,
	whichever axis is meaningful for the property.
	That is, ''corner-top-shape: round square''
	sets ''corner-top-left-shape: round; corner-top-right-shape: square;''.

	For the logical shorthands ('corner-block-start-shape', etc),
	the values are always in start/end order in the other axis.
	That is, ''corner-block-start-shape: round square''
	sets ''corner-start-start-shape: round; corner-start-end-shape: square;''.

<h4 id=corner-shape-rendering>
Rendering 'corner-shape'</h4>

When rendering elements with shaped corners, the element's path needs to be offset,
based on [=border=], [=outline=], 'box-shadow', 'overflow-clip-margin' and more.

When rendering borders or outlines, the offset is aligned to the curve of the element's shape,
while when rendering 'box-shadow' or offsetting for 'overflow-clip-margin', the offset is aligned to the axis.

<figure>
	<img src="images/corner-shape-adjusting.svg"
		style="background: white;"
		alt="Adjusting corner shapes">
	<figcaption>Borders are aligned to the curve, shadows and clip are aligned to the axis.</figcaption>
</figure>


An [=/element=] |element|'s <dfn>outer contour</dfn> is the [=border contour path=] given |element| and |element|'s [=border edge=].

An [=/element=] |element|'s <dfn>inner contour</dfn> is the [=border contour path=] given |element| and |element|'s [=padding edge=].

An [=/element=]'s [=border=] is rendered in the area between its [=outer contour=] and its [=inner contour=].

An [=/element=]'s [=outline=] follows the [=outer contour=] with the [=used value|used=] 'outline-width' and 'outline-offset'.
The precise way in which it is rendered is implementation-defined.

An [=/element=]'s [=overflow=] area is shaped by its [=inner contour=].
An [=/element=]'s [=overflow clip edge=] is shaped by the [=border contour path=] given |element|, and |element|'s [=padding edge=], and |element|'s [=used value|used=] 'overflow-clip-margin'.

Each shadow of [=/element=]'s 'box shadow' is shaped by the [=border contour path=] given |element|, and |element|'s [=border edge=], and the shadow's [=used value|used=] 'box-shadow-spread'.

<div algorithm="adjust-border-inner-path-for-corner-shape">
To compute an [=/element=] |element|'s <dfn>border contour path</dfn> given an [=edge=] |targetEdge| and an optional number |spread| (default 0):
	1. Let |outerLeft|, |outerTop|, |outerRight|, |outerBottom| be |element|'s [=unshaped edge|unshaped=] [=border edge=].
	1. Let |topLeftHorizontalRadius|, |topLeftVericalRadius|, |topRightHorizontalRadius|, |topRightVerticalRadius|, |bottomRightHorizontalRadius|,
		|bottomRightVerticalRadius|, |bottomLeftHorizontalRadius|, and |bottomLeftVerticalRadius| be |element| [=border edge=]'s radii,
		scaled by |element|'s [=opposite corner scale factor=].
	1. Let |topLeftShape|, |topRightShape|, |bottomRightShape|, and |bottomLeftShape| be |element|'s [=computed value|computed=] 'corner-*-shape' values.
	1. Let |targetLeft|, |targetTop|, |targetRight|, |targetBottom| [=unshaped edge|unshaped=] |targetEdge|.
	1. Let |path| be a new path [[SVG2]].
	1. [=Add corner to path=] given |path|,
		the [=rectangle=] <code>(|outerRight| - |topRightHorizontalRadius|, |outerTop|, |topRightHorizontalRadius|, |topRightVerticalRadius|)</code>, |targetEdge|,
		0, |targetTop| - |outerTop|, |outerRight| - |targetRight|, and |topRightShape|.
	1. [=Add corner to path=] given |path|,
		the [=rectangle=] <code>(|outerRight| - |bottomRightHorizontalRadius|, |outerBottom| - |bottomRightVerticalRadius|, |bottomRightHorizontalRadius|, |bottomRightVerticalRadius|)</code>, |targetEdge|,
		1, |outerRight| - |targetRight|, |outerBottom| - |targetBottom|, and |bottomRightShape|.
	1. [=Add corner to path=] given |path|,
		the [=rectangle=] <code>(|outerLeft|, |outerBottom| - |bottomLeftVerticalRadius|, |bottomLeftHorizontalRadius|, |bottomLeftVerticalRadius|)</code>, |targetEdge|,
		2, |outerBottom| - |targetBottom|, |targetLeft| - |outerLeft|, and |bottomLeftShape|.
	1. [=Add corner to path=] given |path|,
		the [=rectangle=] <code>(|outerLeft|, |outerTop|, |topLeftHorizontalRadius|, |topLeftVericalRadius|)</code>, |targetEdge|,
		3, |targetLeft| - |outerLeft|, |targetTop| - |outerTop|, and |topLeftShape|.
	1. If |spread| is not 0, then:
		1. Scale |path| by <code>1 + (|spread| * 2) / (|targetEdge|'s [=width dimension|width=]), 1 + (|spread| * 2) / (|targetEdge|'s [=height dimension|height=])</code>.
		1. Translate |path| by <code>-|spread|, -|spread|</code>.

		Note: this creates an effect where the resulting path has the same shape as the original path, but scaled to fit the given spread.
	1. Return |path|.

To <dfn>add corner to path</dfn> given a path |path|, a rectangle |cornerRect|, a rectangle |trimRect|,
	and numbers |orientation|, |startThickness|, |endThickness|, |curvature|:

	1. If |cornerRect| is empty, or if |curvature| is &infin;:
		1. Let |innerQuad| be |trimRect|'s [=clockwise quad=] .
		1. Extend |path| by drawing a line to |innerQuad|[<code>(|orienation| + 1) % 4</code>].
		1. Return.

	1. Let |cornerQuad| be |cornerRect|'s [=clockwise quad=].
	1. If |curvature| is  -&infin;:
		1. Extend |path| by drawing a line from |cornerQuad|[0] to |cornerQuad|[3], trimmed by |trimRect|.
		1. Extend |path| by drawing a line from |cornerQuad|[3] to |cornerQuad|[2], trimmed by |trimRect|.
		1. Return.

	1. Let |clampedNormalizedHalfCorner| be the [=normalized superellipse half corner=] given <code>clamp(|curvature|, -1, 1)</code>.
	1. Let |equivalentQuadraticControlPointX| be <code>|clampedNormalizedHalfCorner| * 2 - 0.5</code>.
	1. Let |curveStartPoint| be the [=aligned corner point=] given |cornerQuad|[|orienation|], the vector (|equivalentQuadraticControlPointX|, <code>1 - |equivalentQuadraticControlPointX|</code>), |startThickness|, and |orientation| + 1.
	1. Let |curveEndPoint| by the [=aligned corner point=] given |cornerQuad|[(|orientation| + 2) % 4], the vector (<code>|equivalentQuadraticControlPointX| - 1</code>, <code>-|equivalentQuadraticControlPointX|</code>), |endThickness|, and |orientation| + 3.
	1. Let |alignedCornerRect| be a [=rectangle=] that includes the points |curveStartPoint| and |curveEndPoint|.
	1. Let |projectionToCornerRect| be a [=transformation matrix=],
		translated by <code>(|alignedCornerRect|'s [=x coordinate=], |alignedCornerRect|'s [=y coordinate=])</code>,
		scaled by <code>(|alignedCornerRect|'s [=width dimension=], |alignedCornerRect|'s [=height dimension=])</code>,
		translated by <code>(0.5, 0.5)</code>,
		rotated by <code>90deg * orientation</code>,
		and translated by <code>(-0.5, -0.5)</code>.

	1. Let |K| be <code>0.5<sup>abs(|curvature|)</sup></code>.
	1. For each |T| between 0 and 1:
		1. Let |A| be <code>|T|<sup>|K|</sup></code>.
		1. Let |B| be <code>1 - (1 - |T|)<sup>|K|</sup></code>.
		1. Let |normalizedPoint| be <code>(|A|, |B|)</code> if |curvature| is positive, otherwise <code>(|B|, |A|)</code>.
		1. Let |absolutePoint| be |normalizedPoint|, transformed by |projectionToCornerRect|.
		1. If |absolutePoint| is within |trimRect|, extend |path| through |absolutePoint|.

		Note: User agents may approximate this algorithm, for instance, by using concatenated Bezier curves, to balance between performance and rendering accuracy.

To compute the <dfn>aligned corner point</dfn> given a point |originalPoint|, a two-component vector |offsetFromControlPoint|, a number |thickness|, and a number |orientation|:
	1. Let |length| be <code>hypot(|offsetFromControlPoint|.x, |offsetFromControlPoint|.y)</code>.
	1. Rotate |offsetFromControlPoint| by <code>90deg * |orientation|</code>, and scale by |thickness|.
	1. Translate |originalPoint| by <code>|offsetFromControlPoint|.x / |length|, |offsetFromControlPoint|.y / |length|</code>, and return the result.

The <dfn>clockwise quad</dfn> given a [=rectangle=] |rect|, is a [=quadrilateral=] with the points
	(|rect|'s [=x coordinate=], |rect|'s [=y coordinate=]),
	(|rect|'s [=x coordinate=] + |rect|'s [=width dimension=], |rect|'s [=y coordinate=]),
	(|rect|'s [=x coordinate=] + |rect|'s [=width dimension=], |rect|'s [=y coordinate=] + |rect|'s [=height dimension=]),
	(|rect|'s [=x coordinate=], |rect|'s [=y coordinate=] + |rect|'s [=height dimension=]).

</div>

<h4 id=corner-shape-constrain-radii>
Constraining opposite radii</h4>

When concave 'corner-shape' values are present (the [=superellipse parameter=] is negative), diagonally opposite corners might overlap each other.

<div class="example">
	<p>The following example would create overlapping corners if not constrained.</p>
	<pre class="lang-css">
		div {
			corner-shape: scoop;
			border-top-left-radius: 80%;
			border-bottom-right-radius: 80%;
		}
	</pre>
</div>

To prevent this, the four radii are constrained to prevent overlaps.
This is done by computing a hull polygon for each of the opposite corners, and finding the highest downscale factor which, if applied to both corners, would make it so that the polygons would not intersect.

<div algorithm="constrain-radii-for-concave-corner-shape">
To compute the <dfn>opposite corner scale factor</dfn> given an [=/element=] |element|:
	1. Let |rect| be |element|'s [=border box=].
	1. Let |topRightHull| be a the [=normalized inner corner hull=] given |element|'s [=computed value|computed=] 'corner-top-right-shape',
		mapped to the rectangle (|rect|'s [=width dimension=] - |element|'s [=computed value|computed=] horizontal 'border-top-right-radius', 0, |rect|'s [=computed value|computed=] 'border-top-right-radius').
	1. Let |bottomRightHull| be a the [=normalized inner corner hull=] given |element|'s [=computed value|computed=] 'corner-bottom-right-shape',
		rotated by 90deg with (0.5, 0.5) as an origin,
		and mapped to the rectangle (|rect|'s [=width dimension=] - |element|'s [=computed value|computed=] horizontal 'border-bottom-right-radius', |rect|'s [=height dimension=] - |element|'s [=computed value|computed=] vertical 'border-bottom-right-radius',
		|element|'s [=computed value|computed=] 'border-bottom-right-radius').
	1. Let |bottomLeftHull| be a the [=normalized inner corner hull=] given |element|'s [=computed value|computed=] 'corner-bottom-right-shape',
		rotated by 180deg with (0.5, 0.5) as an origin,
		and mapped to the rectangle (0, |rect|'s [=height dimension=] - |element|'s [=computed value|computed=] vertical 'border-bottom-left-radius',
		|element|'s [=computed value|computed=] 'border-bottom-left-radius').
	1. Let |topLeftHull| be a the [=normalized inner corner hull=] given |element|'s [=computed value|computed=] 'corner-top-left-shape',
		rotated by 270deg with (0.5, 0.5) as an origin,
		mapped to (0, 0, |element|'s [=computed value|computed=] 'border-top-left-radius').
	1. Let |scaleFactorA| be the highest number which, if both |topLeftHull| and |bottomRightHull| were scaled by, using their first point as the origin, those polygons would not intersect.
	1. Let |scaleFactorB| be the highest number which, if both |topRightHull| and |bottomLeftHull| were scaled by, using their first point as the origin, those polygons would not intersect.
	1. Return <code>min(1, |scaleFactorA|, |scaleFactorB|)</code>.
</div>


<h4 id=corner-shape-interpolation>
Interpolating corner shapes</h4>

Since a <<corner-shape-value>> can always be expressed by a ''superellipse()'' with an [=superellipse parameter=] variable, interpolating between two
<<corner-shape-value>>s is done by interpolating the [=superellipse parameter=] itself.
Since it uses a <code>log2</code>, interpolating it linearly would result in an effect where concave corners interpolate at a much higher velocity than convex corners.
To balance that, the <dfn>superellipse interpolation</dfn> formula describes how a [=superellipse parameter=] is converted to a value between 0 and 1, and vice versa:

<div algorithm="superellipse-param-to-interpolation-value">
To compute the <dfn>normalized superellipse half corner</dfn> given a [=superellipse parameter=] |s|, return the first matching statement, switching on |s|:

	<dl class=switch>
		: -&infin;
		:: Return 0.

		: &infin;
		:: Return 1.

		: Otherwise
		::
			1. Let |k| be <code>0.5<sup>abs(|s|)</sup></code>.
			1. Let |convexHalfCorner| be <code>0.5<sup>|k|</sup></code>.
			1. If |s| is less than 0, return <code>1 - |convexHalfCorner|</code>.
			1. Return |convexHalfCorner|.
	</dl>
</div>

<div algorithm="superellipse-param-to-hull">
	To compute the <dfn>normalized inner corner hull</dfn> given a [=superellipse parameter=] |curvature|:

	1. If |curvature| is greater than or equal to zero, return a triangle betwen « (1, 1), (1, 0), (0, 1) ».
	1. Let |axisLineA| be a line between <code>(1, 0)</code> and <code>(1, 1)</code>.
	1. Let |axisLineB| be a line between <code>(0, 1)</code> and <code>(1, 1)</code>.
	1. Let |normalizedHalfCorner| be the [=normalized superellipse half corner=] given |curvature|.
	1. Let |halfCornerPoint| be <code>(|normalizedHalfCorner|, 1 - |normalizedHalfCorner|)</code>.
	1. Let |lineFromCenterToHalfCorner| be a line between <code>(0, 0)</code> and |halfCornerPoint|.
	1. Let |tangentLine| be the line perpendicular to |lineFromCenterToHalfCorner|, at |halfCornerPoint|.
	1. Let |intersectionA| be the intersection between |axisLineA| and |tangentLine|.
	1. Let |intersectionB| be the intersection between |axisLineB| and |tangentLine|.
	1. Return a pentagon between the points « (1, 1), (1, 0), |intersectionA|, |intersectionB|, (0, 1), (1, 1) ».
</div>

To interpolate a [=superellipse parameter=] |s| to an interpolation value between 0 and 1, return the [=normalized superellipse half corner=] given |s|.

<div algorithm="convert interpolation value to superellipse parameter">
	To convert a <<number [0,1]>> |interpolationValue| back to a [=superellipse parameter=], switch on |interpolationValue|:

	<dl class=switch>
		: 0
		:: Return -&infin;.

		: 0.5
		:: Return 0.

		: 1
		:: Return &infin;.

		: Otherwise
		::
			1. Let |convexHalfCorner| be |interpolationValue|.
			1. If |interpolationValue| is less than 0.5, set |convexHalfCorner| to 1 - |interpolationValue|.
			1. Let |k| be <code>ln(0.5) / ln(|convexHalfCorner|)</code>.
			1. Let |s| be <code>log2(|k|)</code>.
			1. If |interpolationValue| is less than 0.5, return -|s|.
			1. Return |s|.

	</dl>
</div>

<h2 id="partial-borders">
Partial borders</h2>

	CSS borders traditionally cover an entire border edge. Sometimes,
	however, it can be useful to hide some parts of the border.


	Issue: Here are two proposals for doing this:
	the second one is from GCPM, the first one is an attempt to recast it more readably.
	The names are terrible, known problem, proposals accepted.
	There is a problem with conceiving this as clipping:
	if you have dotted borders, you want whole dots always, not parts of dots.
	So it should be a drawing limit, not a clip.

<h3 id="border-limit">
Partial Borders: the 'border-limit' property</h3>

	<pre class="propdef">
		Name: border-limit
		Value: all | [ sides | corners ] <<length-percentage [0,&infin;]>>?
					| [ top | right | bottom | left ] <<length-percentage [0,&infin;]>>
		Initial: all
		Applies to: all elements, except table element when 'border-collapse' is ''collapse''
		Inherited: no
		Percentages: relative to border-box
		Animation type: discrete
	</pre>

	<p>By default, the entire border is drawn. However, border rendering can be
		limited to only part of a border. The keyword specifies which part, and
		the length or percentage specifies how much.

	<dl dfn-type="value" dfn-for="border-limit">
		<dt><dfn>''all''</dfn>
			<dd>The entire border is drawn.
		<dt><dfn>''sides''</dfn>
			<dd>The sides are drawn up to but not including the corners (as defined
			by the border radii). A length or percentage is measured from the center
			of each side: ''50%'' draws the middle 50% of the border; by default the
			entire side is drawn.
		<dt><dfn>''corners''</dfn>
			<dd>The corners are drawn plus the specified distance into the sides if
			specified. A length is measured from the closest edge of the corner area.
			A percentage is measured from the absolute corner of the border box.
		<dt><dfn>''left''</dfn>
		<dt><dfn>''right''</dfn>
			<dd>For the left and right (vertical) sides, draws the entire side and
			corner. For the top and bottom (horizontal) sides, draws the left/right
			portion, as specified. Distances are measured as for ''corners''.
		<dt><dfn>''top''</dfn>
		<dt><dfn>''bottom''</dfn>
			<dd>For the top and bottom (horizontal) sides, draws the entire side and
			corner. For the left and right (vertical) sides, draws the top/bottom
			portion, as specified. Distances are measured as for ''corners''.
	</dl>

	<div class="example">
		<p>The following example draws only the middle 50% of the sides.</p>
		<pre class="lang-css">
			div {
				border: solid;
				border-limit: sides 50%;
			}
		</pre>
	</div>
	<div class="example">
		<p>The following example draws only the curved parts of the corners.</p>
		<pre class="lang-css">
			div {
				border: solid;
				border-radius: 1em 2em;
				border-limit: corners;
			}
		</pre>
	</div>
	<div class="example">
		<p>The following example draws only the left 4em of the top border.</p>
		<pre class="lang-css">
			div {
				border-top: solid;
				border-limit: left 4em;
			}
		</pre>
	</div>
	<div class="example">
		<p>The following example draws only the first 10px of each corner:</p>
		<pre class="lang-css">
			div {
				border: solid;
				border-limit: corners 10px;
			}
		</pre>
	</div>
	<div class="example">
		<p>The following example draws the curved part of the corner plus 5px
		along the sides:</p>
		<pre class="lang-css">
			div {
				border: solid;
				border-radius: 5px;
				border-limit: corners 5px;
			}
		</pre>
	</div>
	<div class="example">
		<p>The following example draws the curved part of the corner and all of
		the side except the middle 40%.</p>
		<pre class="lang-css">
			div {
				border: solid;
				border-radius: 5px;
				border-limit: corners 30%;
			}
		</pre>
	</div>

<h3 id="border-clip">
The 'border-clip' properties</h3>

	<pre class="propdef">
		Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left
		Value: normal | [ <<length-percentage [0,&infin;]>> | <<flex>> ]+
		Initial: normal
		Inherited: no
		Percentages: refer to length of border-edge side
		Computed value: ''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified
		Animation type: by computed value
	</pre>

	<p>These properties split their respective borders into parts along
	the border edge. The first part is visible, the second is invisible,
	the third part is visible, etc. Parts can be specified with lengths,
	percentages, or flexible lengths (expressed by the ''fr'' unit, as per
	[[CSS3GRID]]).
	The ''border-clip/normal'' value means
	that the border is not split, but shown normally.

	<p>'border-clip' is a shorthand property for the four individual properties.

	<p>If the listed parts are shorter than the border, any remaining
	border is split proportionally between the specified flexible lengths. If
	there are no flexible lengths, the behavior is as if ''1fr'' had been
	specified at the end of the list.

	<p>If the listed parts are longer than the border, the specified parts
	will be shown in full until the end of the border. In this case, all
	flexible lengths will be zero.

	<p>For horizontal borders, parts are listed from left to right. For
	vertical borders, parts are listed from top to bottom.

	<p>The exact border parts are determined by laying out the specified border
	parts with all flexible lengths initially set to zero. Any remaining border is
	split proportionally between the flexible lengths specified.

	<div class="example">
		<pre>border-clip: 10px 1fr 10px;</pre>

		<div style="position: relative; width: 250px; height: 150px; background: white;">
			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
				<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
				<div style="position: absolute; background: white; left: -5px; top: 15px; height: 70px; width: 210px"></div>
			</div>
		</div>
	</div>

	<div class="example">
		<pre>
			border-clip-top: 10px 1fr 10px;
			border-clip-bottom: 10px 1fr 10px;
			border-clip-right: 5px 1fr 5px;
			border-clip-left: 5px 1fr 5px;
		</pre>
		<div style="position: relative; width: 250px; height: 150px; background: white;">
			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
				<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
				<div style="position: absolute; background: white; left: -5px; top: 5px; height: 90px; width: 210px"></div>
			</div>
		</div>
	</div>

	<div class="example">
		<p>By making the first part have zero length, the inverse border of
		the previous example can easily be created:

		<pre>
			border-clip-top: 0 10px 1fr 10px;
			border-clip-bottom: 0 10px 1fr 10px;
			border-clip-right: 0 5px 1fr 5px;
			border-clip-left: 0 5px 1fr 5px;
		</pre>

		<div style="position: relative; width: 250px; height: 150px; background: white;">
			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
				<div style="position: absolute; background: white; left: -5px; top: -5px; height: 10px; width: 15px"></div>
				<div style="position: absolute; background: white; right: -5px; top: -5px; height: 10px; width: 15px"></div>
				<div style="position: absolute; background: white; left: -5px; top: 95px; height: 10px; width: 15px"></div>
				<div style="position: absolute; background: white; right: -5px; top: 95px; height: 10px; width: 15px"></div>
			</div>
		</div>
	</div>

	<div class="example">
		<pre>
			border: thin solid black;
			border-clip: 0 1fr; /* hide borders */
			border-clip-top: 10px 1fr 10px; /* make certain borders visible */
			border-clip-bottom: 10px 1fr 10px;
		</pre>

		<div style="position: relative; width: 250px; height: 150px; background: white;">
			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
				<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
				<div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
			</div>
		</div>
	</div>

	<div class="example">
		<pre>
			border-top: thin solid black;
			border-bottom: thin solid black;
			border-clip-top: 10px;
			border-clip-bottom: 10px;
		</pre>

		<div style="position: relative; width: 250px; height: 150px; background: white;">
			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
				<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
				<div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
			</div>
		</div>
	</div>

	<div class="example">
		<pre>
			border-top: thin solid black;
			border-clip: 10px;
		</pre>
		<div style="position: relative; width: 250px; height: 150px; background: white;">
			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
				<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
				<div style="position: absolute; background: white; left: -5px; top: 0px; height: 110px; width: 210px"></div>
			</div>
		</div>
	</div>

	<div class="example">
		<p>This rendering:
		<div style="background: white; color: black; padding: 0.2em 0.5em">
			<pre style="margin-left: 0;">
				A sentence consists of words&#xB9;.
			</pre>
			<div style="width: 3em; height: 2px; background: black"></div>
			<pre style="margin-left: 0">
				&#xB9; Most often.
			</pre>
		</div>
		can be achieved with this style sheet:
		<pre>
			@footnote {
				border-top: thin solid black;
				border-clip: 4em;
			}
		</pre>
	</div>

	<div class="example">
		<pre>
			border: 4px solid black;
			border-clip-top: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
		</pre>
		<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
		<div style="position: relative; width: 192px; background: white; padding: 40px">
			<div style="border: 4px solid black; height: 40px"></div>
			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
			<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
			<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>
		</div>
		<p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
	</div>

	<div class="example">
		<pre>
			border: 4px solid black;
			border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
		</pre>

		<p>All but one of the visible border parts are represented as flexible lengths in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:
		<div style="position: relative; width: 190px; background: white; padding: 40px">
			<div style="border: 4px solid black; border-top: none; height: 40px"></div>
			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 40px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 70px"></div>
			<div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 80px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 100px"></div>
			<div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 110px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 120px"></div>
			<div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 130px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 140px"></div>
			<div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 150px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 160px"></div>
			<div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 170px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 190px"></div>
			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 200px"></div>
		</div>

		<p>Here is another rendering where 1fr ends up being 30px:

		<div style="position: relative; width: 440px; background: white; padding: 40px">
			<div style="border: 4px solid black; border-top: none; height: 40px"></div>
			<div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 40px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 130px"></div>
			<div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 140px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 200px"></div>
			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 210px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 240px"></div>
			<div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 250px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 260px"></div>
			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 270px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 300px"></div>
			<div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 310px"></div>
			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 370px"></div>
			<div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 390px"></div>
		</div>
		<p>The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.
	</div>

<h2 id="drop-shadows">
Drop Shadows</h2>

<h3 id="box-shadow-color">
Coloring shadows: the 'box-shadow-color' property</h3>

	<pre class="propdef">
		Name: box-shadow-color
		Value: <<color>>#
		Initial: currentcolor
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: list, each item a computed color
		Animation type: by computed value
	</pre>

	<p>The 'box-shadow-color' property defines one or more drop shadow colors.
	The property accepts a comma-separated list of shadow colors.

	<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
	Other Details”]] for how 'box-shadow-color' interacts with other
	comma-separated drop shadow properties to form each drop shadow
	layer.

<h3 id="box-shadow-offset">
Offsetting shadows: the 'box-shadow-offset' property</h3>

	<pre class="propdef">
		Name: box-shadow-offset
		Value: [ none | <<length>>{2} ]#
		Initial: none
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: list, each item either ''box-shadow-offset/none'' or a pair of offsets
			(horizontal and vertical) from the element‘s box
		Animation type: by computed value,
			treating ''box-shadow-offset/none'' as ''0 0''
			when interpolated with non-''box-shadow-offset/none'' values.
	</pre>

	<p>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 ''box-shadow-offset/none'' value,
	which indicates no shadow, or a pair of horizontal and vertical offsets,
	where both values are described as <<length>> values.

	<dl dfn-type=value dfn-for=box-shadow-offset>
	<dt><dfn id="shadow-offset-none">none</dfn>
	<dd>
		The shadow will not be rendered.
		The values of other box shadow properties corresponding to this shadow have no effect.

	<dt><dfn id="shadow-offset-x">1st <<length>></dfn>
	<dd>
		Specifies the <dfn>horizontal offset</dfn> of the shadow.
		A positive value draws a shadow that is offset to the right of the box,
		a negative length to the left.

	<dt><dfn id="shadow-offset-y">2nd <<length>></dfn>
	<dd>
		Specifies the <dfn>vertical offset</dfn> of the shadow.
		A positive value offsets the shadow down, a negative one up.
	</dl>

	<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
	Other Details”]] for how 'box-shadow-offset' interacts with other
	comma-separated drop shadow properties to form each drop shadow
	layer.

<h3 id="box-shadow-blur">
Blurring shadows: the 'box-shadow-blur' property</h3>

	<pre class="propdef">
		Name: box-shadow-blur
		Value: <<length [0,&infin;]>>#
		Initial: 0
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: list, each item a <<length>>
		Animation type: by computed value
	</pre>

	<p>The 'box-shadow-blur' property defines one or more blur radii for drop shadows.
	The property accepts a comma-separated list of <<length>> values.

	<p>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 [[css-backgrounds-3#shadow-blur|Shadow Blurring]], below.

	<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
	Other Details”]] for how 'box-shadow-blur' interacts with other
	comma-separated drop shadow properties to form each drop shadow
	layer.

<h3 id="box-shadow-spread">
Spreading shadows: the 'box-shadow-spread' property</h3>

	<pre class="propdef">
		Name: box-shadow-spread
		Value: <<length>>#
		Initial: 0
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: list, each item a <<length>>
		Animation type: by computed value
	</pre>

	<p>The 'box-shadow-spread' property defines one or more spread distances for drop shadows.
	The property accepts a comma-separated list of <<length>> values.

	<p>Positive values cause the shadow to expand in all directions by the specified radius.
	Negative values cause the shadow to contract.
	See [[css-backgrounds-3#shadow-shape|Shadow Shape]], below.
	<p class="note">Note that for inner shadows,
	expanding the shadow (creating more shadow area)
	means contracting the shadow’s perimeter shape.

	<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
	Other Details”]] for how 'box-shadow-spread' interacts with other
	comma-separated drop shadow properties to form each drop shadow
	layer.

<h3 id="box-shadow-position">
Spreading shadows: the 'box-shadow-position' property</h3>

	<pre class="propdef">
		Name: box-shadow-position
		Value: [ outset | inset ]#
		Initial: outset
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: list, each item one of the keywords
		Animation type: by computed value
	</pre>

	<p>The 'box-shadow-position' property defines one or more drop shadow positions.
	The property accepts a comma-separated list of ''box-shadow-position/outset'' and ''box-shadow-position/inset'' keywords.

	<dl dfn-type=value dfn-for=box-shadow-position>
	<dt><dfn>outset</dfn>
	<dd>
		Causes the drop shadow to be an <dfn local-lt="outer shadow">outer box-shadow</dfn>.
		That means, one that shadows the box onto the canvas, as if it were lifted above the canvas.

	<dt><dfn>inset</dfn>
	<dd>
		Causes the drop shadow to be an <dfn local-lt="inner shadow">inner box-shadow</dfn>.
		That means, one that shadows the canvas onto the box, as if the box were cut out
		of the canvas and shifted behind it.
	</dl>

	<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
	Other Details”]] for how 'box-shadow-position' interacts with other
	comma-separated drop shadow properties to form each drop shadow
	layer.

<h3 id="box-shadow" oldids="the-box-shadow">
Drop Shadows Shorthand: the 'box-shadow' property</h3>

	<pre class="propdef">
		Name: box-shadow
		Value: <<spread-shadow>>#
		Initial: none
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: see individual properties
		Animation type: see individual properties
	</pre>

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

	<p>Each shadow is given as a <<spread-shadow>>,
	outlining the 'box-shadow-offset', 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 ''box-shadow-offset/none''
	and to ''currentcolor'' otherwise.

	<pre class=prod>
	<dfn><<spread-shadow>></dfn> = <<'box-shadow-color'>>? &amp;&amp; [ <<'box-shadow-offset'>> [ <<'box-shadow-blur'>> <<'box-shadow-spread'>>? ]? ] &amp;&amp; <<'box-shadow-position'>>?</pre>

<h3 id="shadow-layers">
Layering, Layout, and Other Details</h3>

	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#linked-properties]].

	<p>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 <i>outer box-shadows</i> of an element are drawn immediately below the background of that element,
	and the <i>inner shadows</i> of an element are drawn immediately above the background of that element
	(below the borders and border image, if any).

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

	<p>Shadows do not trigger scrolling or increase the size of the scrollable area.

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

<h2 id="border-shape">
Border Shaping</h2>

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.

<h3 id="border-shape-func">
The 'border-shape' property</h3>

	<pre class="propdef">
		Name: border-shape
		Value: none | [ <<basic-shape>> <<geometry-box>>?]{1,2}
		Initial: none
		Applies to: all elements
		Inherited: no
		Percentages: relative to the given <<geometry-box>>, or to [=border box=] if not given.
		Computed value: list, each item a computed color
		Animation type: by computed value
	</pre>

The 'border-shape' property is provided with either a single <<basic-shape>> or two <<basic-shape>>s,
resulting in one or two paths, respectively.
The single-path border shape varint uses the existing ''border'' properties of the element to stroke the
path that the given <<basic-shape>> resolves to,
while the double-path border shape variant fills the area between the two paths as if it were the border.

The 'border-shape' property is not compatible with 'border-radius' and 'corner-shape'.
When an element's [=computed value=] of 'border-shape' is not <css>none</css>,
its 'border-radius' is ignored, as if it was set to 0.
'corner-shape' is implicitly ignored, as it can only work in tandem with 'border-radius'.

A 'box-shadow' follows both the inner and outer border paths.

'border-shape' does not affect geometry or layout,
which is still computed using the existing 'border-width' properties.

'border-shape' does not affect the flow of content inside the box.
Note: An author can use 'border-shape' in tandem with 'shape-inside' to create effects that decorate the box and control its text flow at the same time.

The inner 'border-shape' clips the [=overflow=] content of the element, in the same manner as 'border-radius',
as described in <a href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping">corner clipping</a>.

Issue: how should this affect clipping replaced elements?

The fill and stroke color, as well as the stroke width, are taken from the respective 'border-color' and 'border-width' properties.

Issue: define this in detail. Perhaps it should be overridable somehow?

Issue: what do we do about 'border-style'? It can't exactly work for every arbitrary shape.

<h2 id="changes">
Changes</h2>

<h3 id="level-changes">
Additions since [[CSS3BG]]</h3>

	* <<image-1D>> as value for 'border-color' and its longhands
	* added physical and logical 'border-*-radius' shorthands
	* added 'corner-shape' and related 'corners' shorthand
	* added <a href="#partial-borders">partial borders</a> via 'border-limit' and 'border-*-clip' properties
	* turned 'box-shadow' into a shorthand and added longhands
	* moved logical border properties from [[CSS-LOGICAL-1]] to this spec.

<h2 id="acknowledgments">
Acknowledgments</h2>

	<p>In addition to the many contributors to the [[CSS1]], [[CSS21]],
	and [[CSS3BG]] predecessors to this module,
	the editors would like to thank
	Tab Atkins,
	Håkon Wium Lie,
	and Oriol Brufau
	for their suggestions and feedback specifically for this Level 4.