CSS update: Shapes from box values (#33770)

* CSS update: Shapes from box values

* Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

---------

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

files/en-us/web/css/css_shapes/from_box_values/index.md

@@ -6,24 +6,24 @@ page-type: guide
 
 {{CSSRef}}
 
-A straightforward way to create a shape is to use a value from the CSS Box Model. This article explains how to do this.
+A straightforward way to create a shape is to use a value from the [CSS Box Model](/en-US/docs/Web/CSS/CSS_box_model) module. This article explains how to do this.
 
-The [box values](https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values) allowable as a shape value are:
+The {{cssxref("box-edge")}} box values allowable as a shape value are:
 
 - `content-box`
 - `padding-box`
 - `border-box`
 - `margin-box`
 
-The `border-radius` values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.
+The {{cssxref("border-radius")}} values are also supported. This means you can give an element a curved border, and flow your content around the created shape.
 
 ## CSS box model
 
 The values listed above correspond to the various parts of the CSS Box Model. A box in CSS has content, padding, border, and margin.
 
 ![The Box Model consists of the margin, border, padding and content boxes.](box-model.png)
 
-By using Box Values for Shapes we can wrap our content around the edges defined by these values. In all of the examples below I am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow.
+By using box values for shapes, we can wrap our content around the edges defined by these values. In each of the examples below, I am using an element that has padding, a border, and a margin defined so that you can see the different ways in which content will flow.
 
 ### margin-box
 
@@ -35,9 +35,9 @@ In the example below, we have a circular purple item which is a {{htmlelement("d
 
 ### border-box
 
-The `border-box` value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS {{cssxref("border")}} property. In this case it will be the same as `padding-box`, the shape defined by the outside padding edge.
+The `border-box` value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS {{cssxref("border")}} property. In this case, it will be the same as `padding-box`, the shape defined by the outside padding edge.
 
-In the example below you can see how the text now follows the line created by the border. Change the border size and the content follows it.
+In the example below, you can see how the text now follows the line created by the border. Change the border size, and the content will follow it.
 
 {{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}
 
@@ -49,15 +49,15 @@ The `padding-box` value defines the shape enclosed by the outside padding edge.
 
 ### content-box
 
-The `content-box` value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius − border-width − padding. This Means that it is impossible to have a negative value here.
+The `content-box` value defines the shape enclosed by the outside content edge. Each corner radius of this box is the `border-radius` less the `border-width` and `padding`, or `0`, whichever is larger. This means that it is impossible to have a negative value here.
 
 {{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}
 
 ## When to use box values
 
 Using box values is a simple way to create shapes; however, this is by nature only going to work with very simple shapes that can be defined using the well-supported `border-radius` property. The examples shown above show one such use case. You can create a circular shape using border-radius and then curve text around it.
 
-You can create some interesting effects however with just this simple technique. In my final example of this section, I have floated two elements left and right, giving each a border-radius of 100% in the direction closest to the text.
+With just this basic technique, you can create some interesting effects. In my final example of this section, I have floated two elements left and right, giving each a border radius of 100% in the direction closest to the text.
 
 {{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}