title: How to create a bevelled gradient border in WPF
body: <p>I'm trying to create a rounded end progress bar with a beveled border. I've got the progress bar looking like what I want but I'm having difficulty with making the border seemed beveled.
  Can anyone help me out with this please?</p>
  <p>An image of what I'm trying to get it to look like is here! <a href="https://i.stack.imgur.com/4F1aj.jpg" rel="nofollow noreferrer">Bevelled border</a></p>
  <p>My current XAML code for the Window is as follows:</p>
  <pre><code>&lt;Window x:Class=&quot;SplashDemo2.ProgressBarWindow&quot;
          xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
          xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
          Title=&quot;ProgressBarWindow&quot; Height=&quot;100&quot; Width=&quot;500&quot;&gt;
  
      &lt;Window.Resources&gt;
          &lt;Style x:Key=&quot;ProgressBarStyle&quot; TargetType=&quot;ProgressBar&quot;&gt;
              &lt;Setter Property=&quot;Template&quot;&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType=&quot;ProgressBar&quot;&gt;
                          &lt;Border BorderBrush=&quot;#1D4276&quot; BorderThickness=&quot;5&quot; 
                                  CornerRadius=&quot;15&quot; Padding=&quot;0&quot;&gt;
                              &lt;Border.Background&gt;
                                  &lt;LinearGradientBrush EndPoint=&quot;0.5,0.9&quot; StartPoint=&quot;0.5,0&quot;&gt;
                                      &lt;GradientStop Color=&quot;#FFEAEAEA&quot; Offset=&quot;0.9&quot;/&gt;
                                      &lt;GradientStop Color=&quot;#FF646464&quot;/&gt;
                                  &lt;/LinearGradientBrush&gt;
                              &lt;/Border.Background&gt;
  
                              &lt;Grid x:Name=&quot;PART_Track&quot; &gt;
                                  &lt;Rectangle x:Name=&quot;PART_Indicator&quot; 
                                             HorizontalAlignment=&quot;Left&quot; 
                                             RadiusX=&quot;10&quot; RadiusY=&quot;10&quot;&gt;
                                      &lt;Rectangle.Fill&gt;
                                          &lt;LinearGradientBrush EndPoint=&quot;0.5,0.9&quot; StartPoint=&quot;0.5,0&quot;&gt;
                                              &lt;GradientStop Color=&quot;#FF226494&quot; Offset=&quot;0.9&quot;/&gt;
                                              &lt;GradientStop Color=&quot;#FFEBEFFA&quot;/&gt;
                                          &lt;/LinearGradientBrush&gt;
                                      &lt;/Rectangle.Fill&gt;
                                  &lt;/Rectangle&gt;
                              &lt;/Grid&gt;
                          &lt;/Border&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
      &lt;/Window.Resources&gt;
  
      &lt;ProgressBar Value=&quot;50&quot; Width=&quot;380&quot; Height=&quot;25&quot; 
                   Style=&quot;{StaticResource ProgressBarStyle}&quot; 
                   HorizontalAlignment=&quot;Stretch&quot; VerticalAlignment=&quot;Stretch&quot;/&gt;
  &lt;/Window&gt;
  </code></pre>
  <p>Can anyone help me to get the border looking like the image? Many thanks.</p>