DONT ADD ANYTHING HERE!

rounded corners SVG diagram
rounded corners SVG diagram
rounded corners SVG diagram

Notes

  1. rx
    1. The rx property describes the horizontal corner radius of the rect element
    2. Defaults to ry if it is specified
    3. Value type
      1. auto
      2. length
      3. percentage
    4. The used value of rx is never more than 50% of the used value of width for the same shape
  2. ry
    1. The ry property describes the vertical corner radius of the rect element
    2. Defaults to rx if it is specified
    3. Value type
      1. auto
      2. length
      3. percentage
    4. The used value of ry is never more than 50% of the used value of height for the same shape

Code

HTML

<div class="flex-container">
    <figure>
        <img class="svg-img" src="../svg/svg_example_one_rounded_1.svg"
            alt="rounded corners SVG diagram">
    </figure>
    <figure>
        <img class="svg-img" src="../svg/svg_example_one_rounded_2.svg"
            alt="rounded corners SVG diagram">
    </figure>
    <figure>
        <img class="svg-img" src="../svg/svg_example_one_rounded_3.svg"
            alt="rounded corners SVG diagram">
    </figure>
</div>

SVG

// svg_example_one_rounded_1.svg 

  <svg
      width="150"
      height="150"
      xmlns="http://www.w3.org/2000/svg">

    <rect width="100%" height="100%" rx="75" ry="75" fill="blue"/>
 
    <text x="40" 
              y="50" 
              style="stroke:none;
                     fill:white;
                     font-size:2em; 
                     font-family:serif;">rx 75</text>
 
    <text x="40" 
              y="100" 
              style="stroke:none;
                     fill:white;
                     font-size:2em; 
                     font-family:serif;">ry 75</text>
  </svg> 
   // svg_example_one_rounded_2.svg 
  <svg
     . . . 

    <rect width="100%" height="100%" rx="75" ry="25" fill="red"/>
    
     . . . 
  </svg> 
   // svg_example_one_rounded_3.svg 
  <svg
     . . . 

    <rect width="100%" height="100%" rx="25"  fill="green"/>

     . . . 
  </svg>

References

W3C Editor's Draft: Horizontal radius: The rx property
MDN: rect