Skip to content

Commit 170e753

Browse files
committed
[css-backgrounds] Define curve of margin edge using spread curve formula.
1 parent 3ec7765 commit 170e753

File tree

2 files changed

+31
-0
lines changed

2 files changed

+31
-0
lines changed

css-backgrounds/Overview.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2907,6 +2907,13 @@ <h3 id=corner-shaping><span class=secno>5.2. </span>Corner Shaping</h3>
29072907
sides' borders, the arc of the padding edge is less than 90°.
29082908
</div>
29092909

2910+
<p>The margin edge, being outside the border edge, calculates its radius by
2911+
adding the corresponding margin thickness to each border radius. However,
2912+
in order to create a sharper corner when the border radius is small, if
2913+
the ratio <var>r</var> of the border radius to the margin is less than one
2914+
the margin thickness is multiplied by the proportion 1 +
2915+
(<var>r</var>-1)<sup>3</sup> in this calculation.
2916+
29102917
<h3 id=corner-clipping><span class=secno>5.3. </span>Corner Clipping</h3>
29112918

29122919
<p>A box's backgrounds, but not its <a
@@ -4552,6 +4559,11 @@ <h3 id=changes-2012-07><span class=secno>9.1. </span> Changes since the 24
45524559
class=property>border-image-width</code></a>’ is initially set to the
45534560
computed ‘<a href="#border-width"><code
45544561
class=property>border-width</code></a>’, which in this case is zero).
4562+
4563+
<li>Add definition for how the margin edge is curved in response to
4564+
border-radius. (This is relevant for <a href="#ref-CSS-SHAPES"
4565+
rel=biblioentry>[CSS-SHAPES]<!--{{CSS-SHAPES}}--></a>, but does not
4566+
change conformance to CSS Backgrounds and Borders Level 3.)
45554567
</ul>
45564568

45574569
<h3 id=changes-2012-04><span class=secno>9.2. </span> Changes since the 17
@@ -4866,6 +4878,16 @@ <h3 class=no-num id=other-references> Other References</h3>
48664878
</dd>
48674879
<!---->
48684880

4881+
<dt id=ref-CSS-SHAPES>[CSS-SHAPES]
4882+
4883+
<dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a
4884+
href="http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/"><cite>CSS
4885+
Shapes Module Level 1.</cite></a> 20 June 2013. W3C Working Draft. URL:
4886+
<a
4887+
href="http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/">http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/</a>
4888+
</dd>
4889+
<!---->
4890+
48694891
<dt id=ref-CSS1>[CSS1]
48704892

48714893
<dd>Håkon Wium Lie; Bert Bos. <a

css-backgrounds/Overview.src.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2056,6 +2056,13 @@ <h3 id="corner-shaping">Corner Shaping</h3>
20562056
sides' borders, the arc of the padding edge is less than 90&deg;.
20572057
</div>
20582058

2059+
<p>The margin edge, being outside the border edge, calculates its radius
2060+
by adding the corresponding margin thickness to each border radius.
2061+
However, in order to create a sharper corner when the border radius is small,
2062+
if the ratio <var>r</var> of the border radius to the margin is less than one
2063+
the margin thickness is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>
2064+
in this calculation.
2065+
20592066
<h3 id="corner-clipping">Corner Clipping</h3>
20602067

20612068
<p>A box's backgrounds, but not its <a href="#the-border-image">border-image</a>,
@@ -3314,6 +3321,8 @@ <h3 id="changes-2012-07">
33143321
<li>Tighten up the definition of spread for 'box-shadow'.
33153322
<li>Clarify that a 'border-style' of ''none'' also implies an initial 'border-image-width' of zero
33163323
(since 'border-image-width' is initially set to the computed 'border-width', which in this case is zero).
3324+
<li>Add definition for how the margin edge is curved in response to border-radius.
3325+
(This is relevant for [[CSS-SHAPES]], but does not change conformance to CSS Backgrounds and Borders Level 3.)
33173326
</ul>
33183327

33193328
<h3 id="changes-2012-04">

0 commit comments

Comments
 (0)