diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index d76ee19e73ee..339518949160 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -1594,23 +1594,33 @@ The 'border-shape' property Initial: none Applies to: all elements Inherited: no - Percentages: relative to the given <>, or to [=border box=] if not given. + Percentages: see prose Computed value: list, each item a computed color Animation type: by computed value The 'border-shape' property is provided with either a single <> or two <>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 <> resolves to, -while the double-path border shape variant fills the area between the two paths as if it were the border. + +When two <> values are given, the border is rendered between the paths generated shapes. +When only a single <> is given, the border is rendered as a stroke with the +[=relevant side for border shape|relevant side=]'s [=computed value|computed=] [=border width=] as the stroke width. + +The fill color of the border is the [=relevant side for border shape|relevant side=]'s [=computed value|computed=]'border-color'. + +When a <> is not given, the default computation of percentage differs based on the number of given <> values. + +When two <> values are given, the first (outer) one defaults to the [=border box=] and the second (inner) one defaults to the [=padding box=]. +This allows using the different 'border-width' properties to affect the final shape. + +When a single <> value is given, the <> defaults to the ''half-border-box'' value, which allows stroking in a way that matches the default border behavior. The 'border-shape' property is not compatible with 'border-radius' and 'corner-shape'. When an element's [=computed value=] of 'border-shape' is not none, 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. +A 'box-shadow' follows both the outer border path. 'border-shape' does not affect geometry or layout, which is still computed using the existing 'border-width' properties. @@ -1623,11 +1633,15 @@ as described in +An element's relevant side for border shape is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''. + 1. If |element|'s [=computed value|computed=] 'border-block-start-style' is not ''border-style/none'', then return [=block-start=]. + 1. If |element|'s [=computed value|computed=] 'border-inline-start-style' is not ''border-style/none'', then return [=inline-start=]. + 1. If |element|'s [=computed value|computed=] 'border-block-end-style' is not ''border-style/none'', then return [=block-end=]. + 1. If |element|'s [=computed value|computed=] 'border-inline-end-style' is not ''border-style/none'', then return [=inline-end=]. + 1. Return [=block-start=]. + -Issue: what do we do about 'border-style'? It can't exactly work for every arbitrary shape. tentative/border-shape/border-shape-clips-background.html diff --git a/css-shapes-1/Overview.bs b/css-shapes-1/Overview.bs index fd06a7be3214..d6a9843ae954 100644 --- a/css-shapes-1/Overview.bs +++ b/css-shapes-1/Overview.bs @@ -1358,7 +1358,7 @@ Shapes from Box Values Its syntax is: 
-		<> = <> | margin-box
+		<> = <> | margin-box | half-border-box
The definitions of the values are: @@ -1394,6 +1394,9 @@ Shapes from Box Values is the larger of 0 or border-radius - border-width - padding. + The half-border-box value defines the shape + enclosed by a box that is in the middle between the ''padding-box'' and the ''border-box''. +
Given the 100px square below with