title: applying different color border to bottom of div
body: <p>I have a modal where the bottom 10% or so is a different color than the top, and am having trouble applying the border to the bottom, right now it appears as this</p>
  
  <p><a href="https://i.stack.imgur.com/gcvoll.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gcvoll.png" alt="enter image description here"></a></p>
  
  <p>my goal is achieve this styling for the border here<a href="https://i.stack.imgur.com/je1l7l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/je1l7l.png" alt="enter image description here"></a></p>
  
  <pre class="lang-css prettyprint-override"><code>.feature-pending {
    border: toRem(1px) solid $border-gray;
  }
  
  .feature-pending-footer {
    position: relative;
    background-color: $primary-blue;
    min-height: toRem(61px);
    &amp;__body {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0;
      margin-right: -50%;
      transform: translate(-50%, -50%)
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="feature-pending"&gt;
    &lt;h1 class="feature-pending__header"&gt;
      Attention!
    &lt;/h1&gt;
    &lt;p class="feature-pending__body"&gt;
      The Feature is pending generation of your Townify Home Keyword. If you are a new user please allow 1-2 business days from the day you created your account. if you are not a new user please &lt;a class="feature-pending__contact-support" href=""&gt;
              contact support&lt;/a&gt; for assistance.
    &lt;/p&gt;
  
    &lt;div class="feature-pending-footer"&gt;
      &lt;p class="feature-pending-footer__body"&gt;Dismiss&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>