title: Regular border + offset border on button using CSS
body: <p><a href="https://i.stack.imgur.com/AzVTw.png" rel="nofollow noreferrer">css button with double border</a></p>
  
  <p>I'm trying to acheive the same border effect on the button above.</p>
  
  <p>The closest I can get is the following, but the bottom right corner of the bottom border is not properly rounded:</p>
  
  <p>></p>
  
  <pre><code>.login__button {
    background: transparent;
    border: none;
    border-width: 2px 1px 2px 2px;
    border-style: solid;
    border-color: pink;
    border-radius: 4px;
    color: pink;
    margin-bottom: 100px;
    position: relative !important;
    text-transform: uppercase;
    height: 33px;
    width: 102px;
    box-shadow:
      3.5px 4px 0px black,
      1.5px 0px 0px pink,
      3.5px 4px 0px black,
      2px 6px 0px pink;
  }
  
  .login__button::before {
    background: pink;
    content: '';
    position: absolute;
    height: 35px;
    width: 3.0px;
    border-radius: 3px;
    top: 3%;
    right: -2.8px;
  }
  </code></pre>
  
  <p>></p>
  
  <p>I feel like this should be possible using just box-shadows but there doesnt appear to be a way to modify the width of the box shadow to get just the black portion inset properly.</p>