Quite a few misc fixes plus rephrasing 2 paragraphs to streamline

the text.

Author: Adenilson

css-round-display/Overview.html

@@ -277,7 +277,8 @@ <h3 class="heading settled" data-level="3.1" id="device-radius-media-feature"><s
     <p class="issue" id="issue-08465960"><a class="self-link" href="#issue-08465960"></a> Using <a class="property" data-link-type="propdesc" href="#descdef-media-device-radius">device-radius</a> with just a single value (e.g. device-radius: 50%) is enough (for simplicity)? Otherwise, do we need to support all possible values the same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a>? </p>
     <h2 class="heading settled" data-level="4" id="aligning-content"><span class="secno">4. </span><span class="content">Aligning content along the display border</span><a class="self-link" href="#aligning-content"></a></h2>
     <h3 class="heading settled" data-level="4.1" id="shape-inside-property"><span class="secno">4.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-shape-inside">shape-inside</a> property</span><a class="self-link" href="#shape-inside-property"></a></h3>
-    <p> CSS Shapes <a data-link-type="biblio" href="#biblio-css-shapes">[CSS-SHAPES]</a> define the <a class="property" data-link-type="propdesc" href="#propdef-shape-inside">shape-inside</a> property that aligns contents along the edge of a possibly non-rectangular wrapping area. Web authors may use this feature to fit contents inside a round display. However, it could sometimes be hard to specify the wrapping area identical to the shape of a display. Thus, we add a new value '<code>display</code>' to the <a class="property" data-link-type="propdesc" href="#propdef-shape-inside">shape-inside</a> property to facilitate it. When the <a class="property" data-link-type="propdesc" href="#propdef-shape-inside">shape-inside</a> property on an element is set to '<code>display</code>', its content (or contained element) is aligned along the display border automatically. </p>
+    <p> CSS Shapes <a data-link-type="biblio" href="#biblio-css-shapes">[CSS-SHAPES]</a> define the <a class="property" data-link-type="propdesc"
+    href="#propdef-shape-inside">shape-inside</a> property that aligns contents along the edge of a possibly non-rectangular wrapping area. Web authors may use this feature to fit contents inside a round display. However, it can be challenging to specify the wrapping area to be identical to the shape of a display. To address such cases, <a class="property" data-link-type="propdesc" href="#propdef-shape-inside">shape-inside</a> is extended with a new value named '<code>display</code>', such an element having this value will have its content (or contained elements) aligned along the display border automatically.
     <table class="definition propdef" data-link-for-hint="shape-inside">
      <tbody>
       <tr>
@@ -344,11 +345,13 @@ <h3 class="heading settled" data-level="4.1" id="shape-inside-property"><span cl
       <p class="caption">Align the content along the display border</p>
      </div>
     </div>
-    <p> Even though the shape of the rounded display could be described by circle() or ellipse() as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape">&lt;basic-shape></a>, 'shape-inside: display' is useful that authors make contents to be aligned within the display edge conveniently. In case of complicated shaped displays like curved, stelliform, or polygonal shape, the availability of 'shape-inside: display' is more increased in comparison with a simple shaped display (e.g. regular rounded display). </p>
+    <p> This property is specially useful for complex shapes (e.g. curved, stelliform, polygonal), that wouldn't be covered by <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape">&lt;basic-shape></a> (i.e. circle() or ellipse()), allowing web authors to conveniently align contents with the display edge.
+    </p>
     <p> When a containing block is placed on one end of the display and the containing block has 'shape-inside: display', the descendant blocks of the containing block are basically put on the overlapping region between the containing block and the display area. The overlapping region’s shape is mostly complicated shape, so it’s difficult to define the shape using previous method like basic-shape. The figure 4 describes these circumstances as follows. </p>
+
     <div style="width: 500px;">
       <img alt="An image of two examples to show the principle of shape-inside: display" src="images/shape_inside_a.png" style="width: 500px"> 
-     <p class="caption">Align a part of the content along the display border</p>
+     <p class="caption">Align part of the content along the display border</p>
     </div>
     <p class="issue" id="issue-8d78506c"><a class="self-link" href="#issue-8d78506c"></a> What if content overflows? Clipping or scrolling? </p>
     <h2 class="heading settled" data-level="5" id="drawing-borders"><span class="secno">5. </span><span class="content">Drawing borders around the display border</span><a class="self-link" href="#drawing-borders"></a></h2>
@@ -942,4 +945,4 @@ <h2 class="no-num heading settled" id="issues-index"><span class="content">Issue
    <div class="issue"> How to solve overflowing when an element has <a class="property" data-link-type="propdesc" href="#propdef-polar-anchor">polar-anchor</a> value as '<code>top</code>', <a class="property" data-link-type="propdesc" href="#propdef-polar-angle">polar-angle</a> value is 0deg, and <a class="property" data-link-type="propdesc" href="#propdef-polar-distance">polar-distance</a> is equal to the distance from center to edge of containing block? <a href="#issue-9a7a089f"> ↵ </a></div>
   </div>
  </body>
-</html>
+</html>