Repository: flutter
Issue: `ContinousRectangleBorder` does not properly clip a background image when it has `BorderSide`
Labels: framework,has reproducible steps,P2,found in release: 2.10,found in release: 2.13,team-framework,triaged-framework

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

1. Run `flutter create crbissue` 
2. Import `https://pub.dev/packages/cached_network_image` - it's not mandatory, it's just easier to reproduce with this package
3. Replace the `scaffold body` in `main.dart` by this:
```dart
body: Column(
        children: [
          Container(
              height: 200,
              decoration: ShapeDecoration(
                  color: Colors.indigo,
                  shape: ContinuousRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                    side: _counter % 3 == 0
                        ? BorderSide.none
                        : BorderSide(color: Colors.orange, width: (_counter % 29).toDouble()),
                  ),
                  image: DecorationImage(
                      fit: _getBoxFit(),
                      image: const CachedNetworkImageProvider(
                          "https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=4096x4096")))),
          const SizedBox(
            height: 30,
          ),
          Container(
              height: 200,
              decoration: ShapeDecoration(
                  color: Colors.indigo,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                    side: _counter % 3 == 0
                        ? BorderSide.none
                        : BorderSide(color: Colors.orange, width: (_counter % 29).toDouble()),
                  ),
                  image: DecorationImage(
                      fit: _getBoxFit(),
                      image: const CachedNetworkImageProvider(
                          "https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=4096x4096")))),
        ],
      ),
```
4. Copy this function at the bottom of `_MyHomePageState` :
```dart
BoxFit? _getBoxFit() {
    switch (_counter % 8) {
      case 0:
        return BoxFit.contain;
      case 1:
        return BoxFit.cover;
      case 2:
        return BoxFit.fill;
      case 3:
        return BoxFit.fitHeight;
      case 4:
        return BoxFit.fitWidth;
      case 5:
        return BoxFit.none;
      case 6:
        return BoxFit.scaleDown;
      default:
        return null;
    }
  }
```
5. Press the + button a couple of times.

## Expected results: 
The filling of the image should behave the exact same way whether `RoundedRectangleBorder` or `ContinousRectangleBorder` is used.

## Actual results: 
The filling of the image for the `ContinousRectangleBorder` is showing the container background color in cases where it should not.

Here is an example where the `BoxFit` is set to `fitHeight`:
<img width="474" alt="Pasted_Image_30_04_2022__10_13" src="https://user-images.githubusercontent.com/86661185/166097786-1361a18d-337f-4523-97d9-74f12c2183e8.png">

Also : the wider the `BorderSide`, the more visible the background color becomes:
<img width="480" alt="Pasted_Image_30_04_2022__10_17" src="https://user-images.githubusercontent.com/86661185/166097960-c4e36c34-ffda-40c6-ad08-640b99d49256.png">

Without `BorderSide`, both the Continous and Rounded borders behave the same:
<img width="473" alt="Pasted_Image_30_04_2022__10_20" src="https://user-images.githubusercontent.com/86661185/166098004-4a721890-31cb-48bf-ba2d-ffba9fab2db1.png">

It seems like the issue is coming from the combination of ContinousRectangleBorder and BorderSide.

<details>
  <summary>flutter doctor -v</summary>
 
```
[✓] Flutter (Channel stable, 2.10.5, on macOS 12.3.1 21E258 darwin-x64, locale en-BE)
    • Flutter version 2.10.5 at /Users/cekrozl1/Desktop/OneSpan/MSS/FLUTTER/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (12 days ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/cekrozl1/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/cekrozl1/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] IntelliJ IDEA Community Edition (version 2021.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.66.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.38.1

[✓] Connected device (3 available)
    • SM G973F (mobile) • R58N42DX67H • android-arm64  • Android 12 (API 31)
    • macOS (desktop)   • macos       • darwin-x64     • macOS 12.3.1 21E258 darwin-x64
    • Chrome (web)      • chrome      • web-javascript • Google Chrome 100.0.4896.127

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
```

</details>

Thank you !