[css-borders-4] Initial (somewhat scaffoldy) spec for 'border-shape' (#11656)

* [css-borders-4] Initial (somewhat scaffoldy) spec for 'border-shape'

Closes #6997

This defines the 'border-shape' property with a narrow set of details
that we've resolved on, leaving room for discussing some details as we
go along.

Specifically, this adds the two variants of 'border-shape'
(single/double <basic-shape>).

Issues to be opened separately:
* interaction with border-{width|color|style}
* Clipping replaced elements
* Lots of examples

* Expand a bit about overflow

Author: noamr

css-borders-4/Overview.bs

@@ -19,6 +19,7 @@ Warning: Not Ready
 <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" />
@@ -1087,6 +1088,59 @@ Layering, Layout, and Other Details</h4>
 	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>