Skip to content

[css-gaps-1] Update outset properties #12603 #13024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[css-gaps-1] Update outset properties #12603 #13024

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c713684
initial commit
Oct 27, 2025
db6188a
insets and auto
Nov 3, 2025
03dfb5c
insets and auto
Nov 3, 2025
f34abca
formatting
Nov 3, 2025
46b3d99
wording to add rather than subtract
Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
insets and auto
  • Loading branch information
Javier Contreras Tenorio committed Nov 3, 2025
commit 03dfb5c80893165cab39abcffc9fede0844e1879
171 changes: 91 additions & 80 deletions css-gaps-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ Pairing gap intersection points into segments</h4>
A <a>gap decoration</a> is painted between each pair of endpoints identified using the steps above.

The following examples illustrate various settings for the <a href="#break">*-rule-break</a> properties.
To make the differences more apparent, the <a href="#outset">*-rule-outset</a> properties are set to ''0''.
To make the differences more apparent, the <a href="#inset">*-rule-*-inset</a> properties are set to ''0''.

<div class="example">
<pre>
Expand All @@ -379,7 +379,7 @@ Pairing gap intersection points into segments</h4>
row-rule: 6px solid red;
column-rule: 6px solid blue;
rule-break: none;
rule-outset: 0px;
rule-inset: 0px;
}
</pre>
<figure>
Expand All @@ -400,7 +400,7 @@ Pairing gap intersection points into segments</h4>
row-rule: 6px solid red;
column-rule: 6px solid blue;
rule-break: spanning-item;
rule-outset: 0px;
rule-inset: 0px;
}
</pre>
<figure>
Expand All @@ -421,7 +421,7 @@ Pairing gap intersection points into segments</h4>
row-rule: 6px solid red;
column-rule: 6px solid blue;
rule-break: intersection;
rule-outset: 0px;
rule-inset: 0px;
}
</pre>
<figure>
Expand All @@ -442,7 +442,7 @@ Pairing gap intersection points into segments</h4>
row-rule: 6px solid red;
column-rule: 6px solid blue;
rule-break: none;
rule-outset: 0px;
rule-inset: 0px;
}
</pre>
<figure>
Expand Down Expand Up @@ -471,7 +471,7 @@ Pairing gap intersection points into segments</h4>
row-rule: 6px solid red;
column-rule: 6px solid blue;
rule-break: intersection;
rule-outset: 0px;
rule-inset: 0px;
}
</pre>
<figure>
Expand All @@ -482,12 +482,12 @@ Pairing gap intersection points into segments</h4>
</figure>
</div>

<h3 id="outset">
Adjusting gap decoration endpoints: The 'rule-outset' properties</h3>
<h3 id="inset">
Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>

<pre class='propdef'>
Name: column-rule-edge-start-outset, column-rule-edge-end-outset, row-rule-edge-start-outset, row-rule-edge-end-outset
Value: <<length-percentage>>
Name: column-rule-edge-start-inset, column-rule-edge-end-inset, row-rule-edge-start-inset, row-rule-edge-end-inset
Value: auto | <<length-percentage>>
Initial: ''0''
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
Inherited: no
Expand All @@ -496,15 +496,31 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties</h3>
</pre>

<pre class='propdef'>
Name: column-rule-interior-start-outset, column-rule-interior-end-outset, row-rule-interior-start-outset, row-rule-interior-end-outset
Value: <<length-percentage>>
Name: column-rule-interior-start-inset, column-rule-interior-end-inset, row-rule-interior-start-inset, row-rule-interior-end-inset
Value: auto | <<length-percentage>>
Initial: ''50%''
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
Inherited: no
Percentages: refer to the <a>crossing gap width</a>
Animation type: by computed value type
</pre>

For `edge` properties `auto` has the following meaning:
<dl dfn-for=column-rule-edge-start-inset dfn-type=value>
<dt><dfn>auto</dfn>
<dd>
The endpoint is not offset from the content edge of the container.
This is equivalent to a value of ''0''.
</dl>

For `interior` properties `auto` has the following meaning:
<dl dfn-for=column-rule-interior-start-inset dfn-type=value>
<dt><dfn>auto</dfn>
<dd>
The endpoint is placed halfway into the intersection.
This is equivalent to a value of ''50%''.
</dl>

These properties can be used to offset the endpoints of <a>gap decorations</a> relative to the
<a>gap intersection points</a> which would normally determine their endpoints.

Expand All @@ -516,172 +532,167 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties</h3>
A given |start-endpoint| and |end-endpoint| can be either a |edge-intersection| or a |interior-intersection|.</li>
</ul>

The 'column-rule-edge-start-outset' and 'row-rule-edge-start-outset' properties control the behavior for any |start-endpoint| that is an |edge-intersection|,
while the 'column-rule-edge-end-outset' and 'row-rule-edge-end-outset' properties control the behavior for any |end-endpoint| that is an |edge-intersection|.
Positive values extend outwards, beyond the container's content bounds,
while negative values recede inwards from the content edge.
The 'column-rule-edge-start-inset' and 'row-rule-edge-start-inset' properties control the behavior for any |start-endpoint| that is an |edge-intersection|,
while the 'column-rule-edge-end-inset' and 'row-rule-edge-end-inset' properties control the behavior for any |end-endpoint| that is an |edge-intersection|.
Positive values recede inwards from the content edge, while negative values extend outwards, beyond the container's content bounds.

The 'column-rule-interior-start-outset' and 'row-rule-interior-start-outset' properties control the behavior for any |start-endpoint| that is an |interior-intersection|,
while the 'column-rule-interior-end-outset' and 'row-rule-interior-end-outset' properties control the behavior for any |end-endpoint| that is an |interior-intersection|.
Positive values extend towards the center of the intersection,
while negative values recede away from the intersection.
The 'column-rule-interior-start-inset' and 'row-rule-interior-start-inset' properties control the behavior for any |start-endpoint| that is an |interior-intersection|,
while the 'column-rule-interior-end-inset' and 'row-rule-interior-end-inset' properties control the behavior for any |end-endpoint| that is an |interior-intersection|.
Negative values extend towards the center of the intersection, while positive values recede away from the intersection.

The initial value of ''50%'' places the <a>gap decoration</a> endpoint in the center of the intersection.
With a value of ''0'', the <a>gap decoration</a> endpoint will coincide with the edge of the intersection.

<pre class='propdef shorthand'>
Name: column-rule-edge-outset, row-rule-edge-outset
Name: column-rule-edge-inset, row-rule-edge-inset
Value: <<length-percentage>> [ <<length-percentage>> ]?
Initial: ''0''
Applies to: Same as 'column-rule-edge-start-outset', 'column-rule-interior-start-outset', 'row-rule-edge-end-outset', and 'row-rule-interior-end-outset'
Applies to: Same as 'column-rule-edge-start-inset', 'column-rule-interior-start-inset', 'row-rule-edge-end-inset', and 'row-rule-interior-end-inset'
</pre>

Sets the column-rule-edge-start-outset and column-rule-edge-end-outset properties to the specified values.
Similarly, sets the row-rule-edge-start-outset and row-rule-edge-end-outset properties to the specified values.
Sets the column-rule-edge-start-inset and column-rule-edge-end-inset properties to the specified values.
Similarly, sets the row-rule-edge-start-inset and row-rule-edge-end-inset properties to the specified values.

<pre class='propdef shorthand'>
Name: column-rule-interior-outset, row-rule-interior-outset
Name: column-rule-interior-inset, row-rule-interior-inset
Value: <<length-percentage>> [ <<length-percentage>> ]?
Initial: ''50%''
Applies to: Same as 'column-rule-edge-start-outset', 'column-rule-interior-start-outset', 'row-rule-edge-end-outset', and 'row-rule-interior-end-outset'
Applies to: Same as 'column-rule-edge-start-inset', 'column-rule-interior-start-inset', 'row-rule-edge-end-inset', and 'row-rule-interior-end-inset'
</pre>

Sets the column-rule-interior-start-outset and column-rule-interior-end-outset properties to the specified values.
Similarly, sets the row-rule-interior-start-outset and row-rule-interior-end-outset properties to the specified values.
Sets the column-rule-interior-start-inset and column-rule-interior-end-inset properties to the specified values.
Similarly, sets the row-rule-interior-start-inset and row-rule-interior-end-inset properties to the specified values.

<pre class='propdef shorthand'>
Name: rule-edge-outset
Value: <<'column-rule-edge-outset'>>
Applies to: Same as 'column-rule-edge-outset' and 'row-rule-edge-outset'
Name: rule-edge-inset
Value: <<'column-rule-edge-inset'>>
Applies to: Same as 'column-rule-edge-inset' and 'row-rule-edge-inset'
</pre>

Sets the 'column-rule-edge-outset' and 'row-rule-edge-outset' properties to the same value.
Sets the 'column-rule-edge-inset' and 'row-rule-edge-inset' properties to the same value.

<pre class='propdef shorthand'>
Name: rule-interior-outset
Value: <<'column-rule-interior-outset'>>
Applies to: Same as 'column-rule-interior-outset' and 'row-rule-interior-outset'
Name: rule-interior-inset
Value: <<'column-rule-interior-inset'>>
Applies to: Same as 'column-rule-interior-inset' and 'row-rule-interior-inset'
</pre>

Sets the 'column-rule-interior-outset' and 'row-rule-interior-outset' properties to the same value.
Sets the 'column-rule-interior-inset' and 'row-rule-interior-inset' properties to the same value.

<pre class='propdef shorthand'>
Name: column-rule-outset, row-rule-outset
Name: column-rule-inset, row-rule-inset
Value: <<length-percentage>> [ <<length-percentage>> ]?
Initial: ''0''
Applies to: Same as 'column-rule-edge-outset', 'column-rule-interior-outset', 'row-rule-edge-outset', and 'row-rule-interior-outset'
Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'
</pre>

<pre class='propdef shorthand'>
Name: rule-outset
Value: <<'column-rule-outset'>>
Applies to: Same as 'column-rule-outset' and 'row-rule-outset'
Name: rule-inset
Value: <<'column-rule-inset'>>
Applies to: Same as 'column-rule-inset' and 'row-rule-inset'
</pre>

Sets the 'column-rule-outset' and 'row-rule-outset' properties to the same value.
Sets the 'column-rule-inset' and 'row-rule-inset' properties to the same value.

<div class="example">
<pre>
.outset-0px {
column-rule-outset: 0px;
.inset-0px {
column-rule-inset: 0px;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-outset-0px.png">
<img alt="" src="images/example-column-inset-0px.png">
<figcaption>
An outset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
An inset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
</figcaption>
</figure>
</div>

<div class="example">
<pre>
.outset-5px {
column-rule-outset: 5px;
.inset-5px {
column-rule-inset: -5px;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-outset-5px.png">
<img alt="" src="images/example-column-inset-5px.png">
<figcaption>
An outset of ''5px'' extends the ends of <a>gap decorations</a>
An inset of ''-5px'' extends the ends of <a>gap decorations</a>
slightly beyond the edges of adjacent items.
</figcaption>
</figure>
</div>

<div class="example">
<pre>
.outset-0px {
column-rule-start-edge-outset: 0px;
column-rule-end-edge-outset: 8px;
column-rule-start-interior-outset: 0px;
column-rule-end-interior-outset: 8px;
.inset-0px {
column-rule-start-edge-inset: 0px;
column-rule-end-edge-inset: -8px;
column-rule-start-interior-inset: 0px;
column-rule-end-interior-inset: -8px;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-start-end-edge-interior-outsets.png">
<img alt="" src="images/example-column-start-end-edge-interior-insets.png">
<figcaption>
A start edge outset of ''0px'' and an end edge outset of ''8px'' align the endpoints of edge <a>gap decorations</a>
A start edge inset of ''0px'' and an end edge inset of ''-8px'' align the endpoints of edge <a>gap decorations</a>
with the content edge at the start of the gap, and extend the endpoints slightly beyond the content edge at the end of the gap.
An interior outset of ''0px'' at the start intersection and ''8px'' at the end intersection align the start endpoints of interior <a>gap decorations</a>
An interior inset of ''0px'' at the start intersection and ''-8px'' at the end intersection align the start endpoints of interior <a>gap decorations</a>
with the edges of adjacent items at the start of the gap, and extend the end endpoints slightly beyond the edges of adjacent items at the end of the gap.
</figcaption>
</figure>
</div>

<div class="example">
<pre>
.outset-edge-0px-interior-5px {
column-rule-edge-outset: 0px;
column-rule-interior-outset: 5px;
.inset-edge-0px-interior-5px {
column-rule-edge-inset: 0px;
column-rule-interior-inset: -5px;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-interior-outset-5px.png">
<img alt="" src="images/example-column-interior-inset-5px.png">
<figcaption>
An interior outset of ''5px'' extends the endpoints of interior <a>gap decorations</a>
slightly beyond the edges of adjacent items. An edge outset of ''0px'' aligns the endpoints of edge <a>gap decorations</a>
An interior inset of ''-5px'' extends the endpoints of interior <a>gap decorations</a>
slightly beyond the edges of adjacent items. An edge inset of ''0px'' aligns the endpoints of edge <a>gap decorations</a>
with the content edges.
</figcaption>
</figure>
</div>

<div class="example">
<pre>
.outset-50percent {
column-rule-outset: 50%;
.inset-50percent {
column-rule-inset: 50%;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-outset-50percent.png">
<img alt="" src="images/example-column-inset-50percent.png">
<figcaption>
An outset of ''50%'' - the initial value - extends each end of a <a>gap decoration</a>
An inset of ''50%'' - the initial value - extends each end of a <a>gap decoration</a>
halfway into its intersection.
Neighboring <a>gap decorations</a> "meet in the middle" to create a continuous line.
Note that at the edges of the container, the <a>crossing gap width</a> is defined to be ''0'',
so the outset value of ''50%'' resolves to ''0''
so the inset value of ''50%'' resolves to ''0''
and thus the <a>gap decoration</a> does not extend beyond the bounds of the container.
(Contrast with the previous example, which specified an outset in ''px'' units.)
(Contrast with the previous example, which specified an inset in ''px'' units.)
</figcaption>
</figure>
</div>

<div class="example">
<pre>
.outset-negative-5px {
column-rule-outset: -5px;
.inset-positive-5px {
column-rule-inset: 5px;
column-rule-break: intersection;
}
</pre>
<figure>
<img alt="" src="images/example-column-outset-minus-5px.png">
<img alt="" src="images/example-column-inset-minus-5px.png">
<figcaption>
An outset of ''-5px'' shortens the ends of <a>gap decorations</a>
An inset of ''5px'' shortens the ends of <a>gap decorations</a>
relative to the edges of adjacent items.
</figcaption>
</figure>
Expand Down Expand Up @@ -711,14 +722,14 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties</h3>
</li>

<li>
Let |outset| be the computed value of either 'column-rule-outset' or 'row-rule-outset',
Let |inset| be the computed value of either 'column-rule-inset' or 'row-rule-inset',
whichever applies to |gap|.
Resolve any percentages in |outset| against |width|.
Resolve any percentages in |inset| against |width|.
</li>

<li>
Let |result| be |width| multiplied by 50%.
Subtract |outset| from |result|.
Subtract |inset| from |result|.
</li>

<li>
Expand Down