title: CSS: border-color:inherit
body: <p>I have a button with border on the right and the bottom, when I hover that, both border is hidden, and show border on the top and the left with color same as background-color on parent that button, i want to make like a 3D button effect, but its not working. </p>
  
  <p>Here's look like my button when i hover it</p>
  
  <p><a href="https://i.stack.imgur.com/QaTf6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QaTf6.png" alt="enter image description here"></a></p>
  
  <p>What i want is the border-color is red, and if the parent background-color is green the border-color is green</p>
  
  <p>And here's my code </p>
  
  <pre><code>.cta {
      display: inline-block;
      padding: 10px 30px;
      font-family: 'courier new' !important;
      font-size: 19px !important;
      background: #1d85bf;
      color:#fff;
      border:3px solid #0b527a;
      border-top:0;
      border-left: 0;
      border-radius:3px;
      text-transform:uppercase; 
      display: block;
      overflow: hidden;
      white-space: nowrap;
  }
  
  .cta:hover {
      border:3px solid #dbdbdb;
      border-color:inherit !important;
      border-bottom: 0;
      border-right: 0;
      border-top-left-radius: 3px !important;
      color:#fff;
  }
  </code></pre>
  
  <p>Here's my fiddle <a href="https://jsfiddle.net/evpsthx3/" rel="nofollow noreferrer">https://jsfiddle.net/evpsthx3/</a></p>