How do I make a button with multiple nested borders?-CodePudding

I want to make a button that has borders like this

So far, I had an idea of putting the button in a grid and then making multiple borders around the grid, but is there an easier way?

CodePudding user response：

Just nest as many Border elements as necessary:

<Border BorderBrush="Black" BorderThickness="2" CornerRadius="6">
    <Border Background="SteelBlue" BorderBrush="White"
            BorderThickness="1" CornerRadius="4.5" Padding="40,6">
        <TextBlock Foreground="White" Text="Text"/>
    </Border>
</Border>

CodePudding user response：

Taken from: Create a button with a double border?

button {
  color: white;
  border: 1px solid white;
  background: blue;
  outline: solid black 3px;
  padding:0.25em 1em;
}