diff --git a/cypress/platform/neo-test.html b/cypress/platform/neo-test.html
index 5c7acd1d0..4d5794e43 100644
--- a/cypress/platform/neo-test.html
+++ b/cypress/platform/neo-test.html
@@ -111,51 +111,48 @@
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+          </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -166,55 +163,55 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    state "description text" as s2
-  </pre>
+              state "description text" as s2
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s2
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s2
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s2
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s2
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s3
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s3
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s3
-      </pre>
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s3
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s4
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s4
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s4
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s4
+        </pre>
       </td>
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -225,59 +222,55 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    s2 :  description text
-  </pre>
+              s2 :  description text
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
           %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s21 : This is a state description
-      </pre>
+            stateDiagram-v2
+              s21 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
           %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s21 : This is a state description
-      </pre>
+            stateDiagram-v2
+              s21 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s22 : This is a state description
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s22 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s22 : This is a state description
-
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s22 : This is a state description
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s23 : This is a state description
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s23 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s23 : This is a state description
-
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s23 : This is a state description
+        </pre>
       </td>
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -290,69 +283,55 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    s1 --> s2
-
-  </pre>
+              s1 --> s2
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    s31 --> s32
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s31 --> s32
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    s31 --> s32
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s31 --> s32
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-
-   stateDiagram-v2
-    s41 --> s42
-
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s41 --> s42
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-
-     stateDiagram-v2
-      s51 --> s52
-
-
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s51 --> s52
         </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s61 --> s62
-
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s61 --> s62
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s61 --> s62
-
-
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s61 --> s62
+        </pre>
       </td>
-
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -366,65 +345,51 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    s1 --> s2: A transition
-
-  </pre>
+              s1 --> s2: A transition
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    a1 --> a2: A transition
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a1 --> a2: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    a1 --> a2: A transition
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a1 --> a2: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-
-   stateDiagram-v2
-    a3 --> a4: A transition
-
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a3 --> a4: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-
-   stateDiagram-v2
-    a5 --> a6: A transition
-
-
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a5 --> a6: A transition
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    a7 --> a8: A transition
-
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a7 --> a8: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    a7 --> a8: A transition
-
-
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a7 --> a8: A transition
       </pre>
       </td>
     </tr>
@@ -1650,6 +1615,69 @@ direction LR
   <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
 </tr>
 
+<tr>
+  <th class="vertical-header">
+    <button class="collapsible">
+      Flow chart Node, rounded
+    </button>
+    <div class="content">
+      <div class="pre-scrollable">
+        <pre>
+          flowchart LR
+            rounded(rounded)
+        </pre>
+      </div>
+    </div>
+  </th>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+</tr>
+
+<!-- Separator row -->
+<tr class="separator">
+  <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+</tr>
+
 <tr>
   <th class="vertical-header">
     <button class="collapsible">
diff --git a/docs/neo-style-to-do b/docs/neo-style-to-do
index 2cf300a3e..c192ffc4d 100644
--- a/docs/neo-style-to-do
+++ b/docs/neo-style-to-do
@@ -8,5 +8,8 @@
 8. The font-size of node labels seems a bit off.
 9. When selecting look=neo and theme for composite stated, the height differs.
 10. Drop-shadows for non-rectangular shapes are not supported: Status: Fixed
-11. Gradient
-12. Rx,Ry of rects do not apply any longer
+11. Gradient: Fix proper color from blue to red. Do last (render.ts)
+12. Rx,Ry of rects in neo is not applied correct on rects except composite states
+
+13. Stop state shall be filled and just outer circle shall have
+14. No curve on line under title in composite states: Status fixed
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index e91b4815f..959bcba0d 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -99,10 +99,7 @@ const getStyles = (
   [data-look="neo"].statediagram-cluster rect {
     fill: ${options.compositeTitleBackground};
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    //stroke: none;
     stroke-width: 1px;
-    rx: 3;
-    ry: 3;
   }
 
   ${userStyles}