title: Corner-rounded flat button in WPF
body: <p>I am designing a UI with WPF having a rounded flat button. I wrote following code for this kind of button:</p>
  
  <pre><code>&lt;Border BorderThickness="1"
          BorderBrush="Transparent"
          Background="DarkCyan"
          CornerRadius="4"
          Height="35"
          Width="75"&gt;
              &lt;Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                      Content="Enter"
                      VerticalAlignment="Stretch"
                      HorizontalAlignment="Stretch"
                      Background="DarkCyan"
                      Foreground="White"/&gt;
  &lt;/Border&gt;
  </code></pre>
  
  <p>This button's style is exactly what I need. But at runtime, when the mouse moves to the button, it is not rounded anymore. It is a rectangle with same size. In fact, the button overflows the border. So I added <code>padding</code> to the border like this:</p>
  
  <pre><code>&lt;Border BorderThickness="1"
          BorderBrush="Transparent"
          Background="DarkCyan"
          CornerRadius="4"
          Height="35"
          Width="75"
          Padding="2"&gt;
              &lt;Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                      Content="Enter"
                      VerticalAlignment="Stretch"
                      HorizontalAlignment="Stretch"
                      Background="DarkCyan"
                      Foreground="White"/&gt;
  &lt;/Border&gt;
  </code></pre>
  
  <p>In this case, button in <code>hoover mode</code> does not overflow the border anymore, But it is still rectangle and so button&rsquo;s color (In <code>hoover mode</code>) differs in this rectangle and other spaces of border. So unluckily it is not useful yet.</p>
  
  <p>Now my question is: Is there any way to build a corner-rounded flat button (like the one I mentioned) that marked space in moving onto the button would be exactly the corner rounded space?</p>