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
</pre>

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

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

	<p class="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>

	<p>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</h3>

By default, non-zero border-radii define a quarter-ellipse that rounds the affected corners.
However in some cases, other corner shapes are desired.
The 'corner-shape' property group specifies a reinterpretation of the radii to define other corner shapes.

The different shapes applicable to 'corner-shape' can be expressed as different parameters to a superellipse.
A superellipse is a closed curve resembling an ellipse, and based on its `k` parameter can express all the shapes between a square, an ellipse, and a notch.

To allow full expression as well as interpolation, the 'corner-shape' properties can provide its own superellipse parameter 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-rendering>
Rendering 'corner-shape'</h4>
'corner-shape' works alongside 'border-radius', and does not have any visual effect with a 'border-radius' of 0.
It acts as an alteration on top of the default round 'border-radius', and thus can be used as progressive enhancement.

Like 'border-radius', 'corner-shape' clips elements according to the [=overflow=] rules, and applies to the rendering of the border.
Since stroking a superellipse accurately may be computationally intensive, user agents may approximate the path using bezier curves,
as well as account for sharp edges and overlaps.

Issue: 'border-radius' already handles *adjacent* corners overlapping by shrinking the radiuses proportionally.
A negative ''superellipse()'' parameter allows for *opposite* corners to sometimes overlap, and needs additional restrictions defined.

Issue <a href="https://github.com/w3c/csswg-drafts/issues/11610">#11610</a>: check if we need additional rendering restrictions.

<h4 id=corner-shape-value>
'corner-shape' values</h4>

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

	<dl dfn-type="value" dfn-for="<corner-shape-value>">
		<dt><dfn>round</dfn>
		<dd>
			Border radii define a convex elliptical curve at the corner. Equivalent to <css>superellipse(2)</css>.

			Note: this is the initial value of 'corner-shape' properties, as elements with 'border-radius' would be rounded.

		<dt><dfn>scoop</dfn>
		<dd>Border radii define a concave elliptical curve at the corner. Equivalent to <css>superellipse(0.5)</css>.
		<dt><dfn>bevel</dfn>
		<dd>Border radii define a diagonal slice at the corner. Equivalent to <css>superellipse(1)</css>.
		<dt><dfn>notch</dfn>
		<dd>Border radii define a concave 90deg angle at the corner. Equivalent to <css>superellipse(0)</css>.
		<dt><dfn>straight</dfn>
		<dd>Border radii define a convex 90deg angle at the corner.
			This would have the same visual effect as a 'border-radius' of 0. This is different from having a 'border-radius' of 0 when animating.
			Equivalent to <css>superellipse(infinity)</css>.
		<dt><dfn>squircle</dfn>
		<dd>Border radii define a convex curve between an ellipse and an convex angle, equivalent to <css>superellipse(4)</css>.
	</dl>

	Issue <a href="https://github.com/w3c/csswg-drafts/issues/11607">#11607</a>: resolve on ''straight'' vs <css>none</css>.

	The <dfn>superellipse( <<number>> | infinity )</dfn> function describes the curvature of the corner.
	It accepts a <dfn>superellipse exponent</dfn>, which defines the curvature of the corner, or the exponent of the formula.
	The [=superellipse exponent=] accepts values between 0 (a straight concave angle) and <css>infinity</css> (a straight convex angle),
	with the values in between representing the curvatures in between.

	The ''superellipse()'' formula can be described in cartesian coordinates, as follows,
	where <code>a</code> is the horizontal ''border-radius''
	<code>b</code> is the vertical ''border-radius'', and <code>k</code> is the [=superellipse exponent=]:

	<pre>
		|x/a|^k + |y/b|^k = 1
	</pre>

<h4 id=corner-shape-shorthand>
Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties</h4>

	<pre class="propdef">
		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>

	Applies the shape to all corners, following the same rules as ''border-radius''.

	<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 [=flow-relative=] properties
	'corner-start-start-shape',
	'corner-start-end-shape',
	'corner-end-start-shape',
	and 'corner-end-end-shape'
	correspond to the [=physical=] properties
	'corner-top-left-shape',
	'corner-bottom-left-shape',
	'corner-top-right-shape',
	and 'corner-bottom-right-shape'.
	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 'corner-<var>block</var>-<var>inline</var>-shape').

	<pre class=propdef>
		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>>
		Initial: round
		Applies to: all elements where 'border-radius' can apply
		Inherited: no
		Computed value: see individual properties
		Animation type: see individual properties
	</pre>

	<p>The 'corner-*-shape' shorthands set the two 'corner-*-*-shape'
	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 'corner-top-shape',
	top-right, bottom-right for 'corner-right-shape',
	bottom-left, bottom-right for 'corner-bottom-shape',
	top-left, bottom-left for 'corner-left-shape',
	start-start, start-end for 'corner-block-start-shape',
	end-start, end-end for 'corner-block-end-shape'
	start-start, end-start for 'corner-inline-start-shape',
	and start-end, end-end for 'corner-inline-end-shape'.
	If the second value is omitted it is copied from the first.


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

Since a <<corner-shape-value>> can always be expressed by a ''superellipse()'' with an [=superellipse exponent=] variable, interpolating between two
<<corner-shape-value>>s is done by interpolating the [=superellipse exponent=] itself.
Since it's an exponent, 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 exponent=] is converted to a value between 0 and 1, and vice versa:

<div algorithm="superellipse-exponent-to-interpolation-value">
To interpolate a <<number [0,&infin;]>> |exponent| to an interpolation value between 0 and 1:
	1. If |exponent| is 0, return 0.
	1. If |exponent| is &infin;, return 1.
	1. Return <code>1/(2^(1/|exponent|))</code>.

To convert a <<number [0,1]>> |interpolationValue| back to a [=superellipse exponent=]:
	1. If |interpolationValue| is 0, return 0.
	1. If |interpolationValue| is 1, return &infin;.
	1. Return <code>ln(0.5)/ln(|interpolationValue|)</code>.
</div>

<a href="https://github.com/w3c/csswg-drafts/issues/11608">Issue #11608</a>: resolve on this or another interpolation formula.

<pre>

</pre>

	<div class="example">
		For example, the following declarations create a right-pointing next button.
		<pre>
			a {
				border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
				corner-shape: round angle angle round;
				padding: .5em 1em .5em .5em;
			}
		</pre>
		<div style='font: bold 200%/1 sans-serif;
			width: 2.3em;
			width: min-content;
			white-space: nowrap;
			padding: .5em 1.1em .5em .5em;
			border-radius: .3em 0 0 .3em;
			background: url(&apos;data:image/svg+xml,\
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40">\
			    <path d="m 0 0 h 65 l 10 20 l -10 20 h -65 z" fill="yellowgreen" />\
			</svg>&apos;) no-repeat 0 / auto 100%'>
			Next
		</div>
		As a fallback in UAs that don't support 'border-radius',
		the right side would be rounded rather than pointy:
		<div style='font: bold 200%/1 sans-serif;
			width: 2.3em;
			width: min-content;
			white-space: nowrap;
			padding: .5em 1em .5em .5em;
			border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
			background: yellowgreen'>
			Next
		</div>
	</div>

	<p class="issue">
		How to allow custom corners? Perhaps a ''path()'' function? Or a ''cubic-bezier()''?
		Something else?

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

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

	<p class="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</h4>

	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.