Create borderbrush "around the border path"

Question

I'm trying to create a border with a gradient stroke around the border path, not around the full element but around the border itself.

A simple example of what I do not want is:

<Border BorderThickness="10" Width="100" Height="50">
    <Border.BorderBrush>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Black" Offset="0.5"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Border.BorderBrush>
</Border>

This creates a border that looks like:

What I to achieve wish is something like the image below. Notice that this achieved by blurring, I rather not do that as that would limit the what can be done - and more importantly: it would either blur all child elements, or I'd lose the ability to walk the visual tree with the border at the expected position. (Border would be a sibbling to its "content")

Answer 1

If you really want to be able to have a blurred gradient border i think you might have to go with something like this.

1. Create a trapeze-shape with your gradient:

2. Then copy this shape 3 times and apply some render-transformations to get the border shape

3. Apply a Blur Effect on the whole shape

I made all those screenshots directly from the WPF result.

Answer 2

Dig a bit into shadow of border it looks closer

<Border BorderThickness="5" Width="100" Height="50" CornerRadius="5"  BorderBrush="Gray">
    <Border.Effect>
        <DropShadowEffect BlurRadius="20" Opacity="1" ShadowDepth="1" Color="Black">
        </DropShadowEffect>
    </Border.Effect>
</Border>

It will give you something like

Alternatively

you can draw Blured dummy border on the same place with the current one (Bind width and height), but lower in the markup, in that case UI will draw dummy border over your container border and you'll see bluring without harming the tree

<Border BorderThickness="0" Width="100" Height="50" CornerRadius="5" BorderBrush="Gray" x:Name="x">
    <TextBox Width="70" Height="20">Some data</TextBox>
</Border>
<Border BorderThickness="5" Width="{Binding Width, ElementName=x}" Height="{Binding Height, ElementName=x}" CornerRadius="0" BorderBrush="Black">
    <Border.Effect>
        <BlurEffect Radius="10"></BlurEffect>
    </Border.Effect>
</Border>