WPF inset shadow with corner radius-CodePudding

I'm trying to mimic a css inset shadows with rounded corners behavior in WPF.

I've tried to play with different combinations of DropShadowEffect, SystemDropShadowChrome from Windows themes and custom OpacityMasks, but all my solutions are not even close to desired shadow effect :(

Just a regular cornered border to begin with:

<Border Width="100" Height="50" CornerRadius="30" BorderThickness="1" BorderBrush="Green" Background="White">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="0" BlurRadius="5" Color="Blue"/>
    </Border.Effect>
</Border>

What I'm trying to achieve:

.shadow-div{
  width: 100px;
  height: 50px;
  border-radius: 34px;
  background: white;
  border: 1px solid green;
  box-shadow: inset 0px 3px 4px blue;
}

<div />

CodePudding user response：

Do you mean something like this:

I would go with Border in Border, the outer Border has a gradient brush as background.

<Border Width="100" Height="50" CornerRadius="30" BorderThickness="1" BorderBrush="Green" Padding="2,4,2,1">
    <Border.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="Blue" Offset="0"></GradientStop>
                <GradientStop Color="White" Offset="1"></GradientStop>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Border.Background>
    <Border Background="White"  CornerRadius="30" BorderThickness="1">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="2" BlurRadius="7" Direction="90" Color="White" Opacity="1" />
        </Border.Effect>
    </Border>
</Border>