update learn background and borders (mdn#33143)

* update learn background and borders

add features supported since this was written a LONG time ago.

* typos

* review

files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md

@@ -59,7 +59,7 @@ The {{cssxref("background-color")}} property defines the background color on any
 
 In the example below, we have used various color values to add a background color to the box, a heading, and a {{htmlelement("span")}} element.
 
-**Play around with these, using any available [\<color>](/en-US/docs/Web/CSS/color_value) value.**
+**Play around with these, using any available [`<color>`](/en-US/docs/Web/CSS/color_value) value.**
 
 {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}
 
@@ -81,6 +81,8 @@ The {{cssxref("background-repeat")}} property is used to control the tiling beha
 - `repeat-x` — repeat horizontally.
 - `repeat-y` — repeat vertically.
 - `repeat` — the default; repeat in both directions.
+- `space` — repeat as many times as possible, adding space between the images if there is extra space available.
+- `round` — similar to `space`, but stretches the images to fill any extra space
 
 **Try these values out in the example below. We have set the value to `no-repeat` so you will only see one star. Try out the different values — `repeat-x` and `repeat-y` — to see what their effects are.**
 
@@ -95,7 +97,7 @@ You can also use keywords:
 - `cover` — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. In this case, part of the image is likely to end up outside the box.
 - `contain` — the browser will make the image the right size to fit inside the box. In this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the box.
 
-In the example below I have used the _balloons.jpg_ image along with length units to size it inside the box. You can see this has distorted the image.
+In the example below, the _balloons.jpg_ image has length units set to size it inside the box. You can see this has distorted the image.
 
 Try the following.
 
@@ -163,7 +165,7 @@ Finally, you can also use a 4-value syntax in order to indicate a distance from
 
 A gradient — when used for a background — acts just like an image and is also set by using the {{cssxref("background-image")}} property.
 
-You can read more about the different types of gradients and things you can do with them on the MDN page for the [`<gradient>`](/en-US/docs/Web/CSS/gradient) data type. A fun way to play with gradients is to use one of the many CSS Gradient Generators available on the web, such as [this one](https://cssgradient.io/). You can create a gradient then copy and paste out the source code that generates it.
+You can read more about the different types of gradients and things you can do with them on the MDN page for the [`<gradient>`](/en-US/docs/Web/CSS/gradient) data type. A fun way to play with gradients is to use one of the many CSS Gradient Generators available on the web, such as [CSSGradient.io](https://cssgradient.io/). You can create a gradient then copy and paste out the source code that generates it.
 
 Try some different gradients in the example below. In the two boxes respectively, we have a linear gradient that is stretched over the whole box, and a radial gradient with a set size, which therefore repeats.
 
@@ -190,7 +192,7 @@ background-position:
 
 Each value of the different properties will match up to the values in the same position in the other properties. Above, for example, `image1`'s `background-repeat` value will be `no-repeat`. However, what happens when different properties have different numbers of values? The answer is that the smaller numbers of values will cycle — in the above example there are four background images but only two `background-position` values. The first two position values will be applied to the first two images, then they will cycle back around again — `image3` will be given the first position value, and `image4` will be given the second position value.
 
-**Let's play. In the example below I have included two images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.**
+**Let's play. The example below includes two background images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.**
 
 {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}
 
@@ -206,7 +208,7 @@ The {{cssxref("background-attachment")}} property only has an effect when there
 
 ### Using the background shorthand property
 
-As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.
+As mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.
 
 If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with `no-repeat` and a position, then a color.
 
@@ -221,13 +223,13 @@ Take a look at the MDN page for {{cssxref("background")}} to see all of the cons
 
 ### Accessibility considerations with backgrounds
 
-When placing text on top of a background image or color, you should take care that you have enough contrast for the text to be legible for your visitors. If specifying an image, and if text will be placed on top of that image, you should also specify a `background-color` that will allow the text to be legible if the image does not load.
+When placing text on top of a background image or color, you should take care that you have enough [contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for the text to be legible for your visitors. If specifying an image, and if text will be placed on top of that image, you should also specify a `background-color` that will allow the text to be legible if the image does not load.
 
 Screen readers cannot parse background images; therefore, they should be purely decoration. Any important content should be part of the HTML page and not contained in a background.
 
 ## Borders
 
-When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.
+When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and [style](/en-US/docs/Web/CSS/line-style) of the border in one line of CSS.
 
 We can set a border for all four sides of a box with {{cssxref("border")}}:
 
@@ -245,7 +247,7 @@ Or we can target one edge of the box, for example:
 }
 ```
 
-The individual properties for these shorthands would be:
+The individual properties include the {{cssxref("border-width")}}, {{cssxref("border-style")}}, and {{cssxref("border-color")}} shorthand properties:
 
 ```css
 .box {
@@ -255,7 +257,7 @@ The individual properties for these shorthands would be:
 }
 ```
 
-And for the longhands:
+There are longhand properities for width, style, and color for each of the four sides:
 
 ```css
 .box {
@@ -265,7 +267,7 @@ And for the longhands:
 }
 ```
 
-> **Note:** These top, right, bottom, and left border properties also have mapped _logical_ properties that relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers [handling different text directions](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
+> **Note:** These top, right, bottom, and left border properties also have mapped [_logical_ border properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values#properties_for_borders) that relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers [handling different text directions](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
 
 There are a variety of styles that you can use for borders. In the example below, we have used two different border styles for the box and two different border styles for the heading. Play with the border style, width, and color to see how borders work.
 
@@ -291,7 +293,9 @@ Or to make the top right corner have a horizontal radius of 1em, and a vertical
 }
 ```
 
-We have set all four corners in the example below and then changed the values for the top right corner to make it different. You can play with the values to change the corners. Take a look at the property page for {{cssxref("border-radius")}} to see the available syntax options.
+> **Note:** Like with the border properties above, these border-radius properties also have mapped [_logical_ border-radius properties]/en-US/docs/Web/CSS/CSS_logical_properties_and_values#properties_for_border_radius).
+
+We have set all four corners in the example below and then changed the values for the top right corner to make it different. You can play with the values to change the corners. Take a look at the property page for {{cssxref("border-radius")}} to see the available syntax options. The [border-radius generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator) can be used to output rounded corner values for you.
 
 {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}