title: Card borderOnForeground isn't working as expected
body: <p><strong>Code:</strong> </p>
  
  <pre><code>Card(
    color: Colors.blue,
    borderOnForeground: false, // doesn't do anything on true also
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(300)),
    child: Container(
      width: 200,
      height: 200,
      color: Color(0x30FF0C5C),
      child: Text(
        "|||||||",
        style: TextStyle(fontSize: 40),
      ),
    ),
  )
  </code></pre>
  
  <p><strong>Docs say:</strong></p>
  
  <blockquote>
    <p>borderOnForeground: Whether to paint the [shape] border in front of the [child].
    The default value is true. If false, the border will be painted behind the [child].</p>
  </blockquote>
  
  <p><strong>Output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8YQTi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8YQTi.png" alt="enter image description here"></a></p>
  
  <p><strong>Issue:</strong></p>
  
  <p>I want the white vertical lines to be inside the blue circle when by default (when <code>borderOnForeground: true</code>) but it doesn't do that, neither it does on setting it to <code>false</code>. What <code>borderOnForeground</code> actually does then?</p>
  
  <p><strong>NOTE:</strong> </p>
  
  <p>I know there are many ways of achieving what I asked using <code>ClipRRect</code>, <code>ClipOval</code> etc. I am not looking for those solutions, I just want to know what <code>borderOnForeground</code> does?</p>