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
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()
</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: the 'corner-shape' property</h3>

	<pre class="propdef">
		Name: corner-shape
		Value: [ round | angle ]{1,4}
		Initial: round
		Applies to: all elements, except table element when 'border-collapse' is ''collapse''
		Inherited: no
		Animation type: discrete
	</pre>

	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 specifies a reinterpretation of the radii
	to define other corner shapes.

	<dl dfn-type="value" dfn-for="corner-shape">
		<dt><dfn>''round''</dfn>
		<dd>Border radii define a convex elliptical curve at the corner.
		<dt><dfn>''angle''</dfn>
		<dd>Border radii define a diagonal slice at the corner.
	</dl>

	<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?

<h3 id="corners-shorthand">
Corner Shape and Size: the 'corners' shorthand</h3>

	<pre class="propdef shorthand">
		Name: corners
		Value: <<'corner-shape'>> || <<'border-radius'>>
	</pre>

	The 'corners' shorthand sets 'corner-shape' and 'border-radius' in the same declaration.
	If either is omitted, it is reset to its initial value.

	<div class="example">
		For example, the following declaration creates a diamond shape.
		<pre>corners: angle 50%;</pre>
		In UAs that don't support 'corner-shape', the declaration is ignored
		(falls back to a rectangle).
	</div>

	<div class="example">
		In this example, the first declaration creates tabs with vertical sides and rounded corners using 'border-radius',
		while the second example makes them trapezoid-shaped in UAs that support 'corners'.
		<pre>
			border-radius: 0.25em 0.25em 0 0;
			corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;
		</pre>
	</div>

<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="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.