Search code examples
htmlcsssassborder

applying different color border to bottom of div

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

enter image description here

my goal is achieve this styling for the border hereenter image description here

.feature-pending {
  border: toRem(1px) solid $border-gray;
}

.feature-pending-footer {
  position: relative;
  background-color: $primary-blue;
  min-height: toRem(61px);
  &__body {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
}

<div class="feature-pending">
  <h1 class="feature-pending__header">
    Attention!
  </h1>
  <p class="feature-pending__body">
    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 <a class="feature-pending__contact-support" href="">
            contact support</a> for assistance.
  </p>

  <div class="feature-pending-footer">
    <p class="feature-pending-footer__body">Dismiss</p>
  </div>
</div>
Solution 
  • .feature-pending {
  border-radius:3px;
}

.feature-pending-footer {
  position: relative;
  background-color: $primary-blue;
  min-height: toRem(61px);
  *border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;*
  &__body {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
}
<div class="feature-pending">
  <h1 class="feature-pending__header">
    Attention!
  </h1>
  <p class="feature-pending__body">
    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 <a class="feature-pending__contact-support" href="">
            contact support</a> for assistance.
  </p>

  <div class="feature-pending-footer">
    <p class="feature-pending-footer__body">Dismiss</p>
  </div>
</div>

    I think you can't solve this problem because of border , you need to delete

    border: toRem(1px) solid $border-gray

    and add border-radius ,if it's need to you