From f00db891097543957f0741a572c90e524d50c32c Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 2 Oct 2025 13:49:56 +0100 Subject: [PATCH 1/2] [css-borders-4] [css-shapes-1] Specify rendering of single-path border-shape border-shape takes its color (and thickness if single-path) from one of the border sides, namely the first one (in logical order) that has a border-style other than none. Also define half-border-box as per resolution, in css-shapes-1. https://github.com/w3c/csswg-drafts/issues/11662#issuecomment-3357273733 Closes #11662 --- css-borders-4/Overview.bs | 32 +++++++++++++++++++++++--------- css-shapes-1/Overview.bs | 5 ++++- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index d76ee19e73ee..24be65dffc4c 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 +To choose the relevant side for border shape given an [=element=] |element|: + 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 From 0d766bca42c88259418560a1e042aa2e29b428c2 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Tue, 14 Oct 2025 21:01:42 +0100 Subject: [PATCH 2/2] Update css-borders-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index 24be65dffc4c..339518949160 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -1634,7 +1634,7 @@ as described in -To choose the relevant side for border shape given an [=element=] |element|: +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=].