Заполнение не позволяет псевдоэлементам создавать границы внизу

Question

Я пытаюсь создать нижний радиус границы для элементов h2, используя псевдоэлементы.Но когда я применяю отступы, верхний левый и верхний правый границы-нижний радиус не отражаются.Но если я применил маржу, это отразилось.Я не могу понять, почему это произошло

h2:after {
  content: "";
  width: 10%;
  border-bottom: 10px solid rgb(255, 0, 0);
  border-radius: 5px 5px 5px 5px;
  display: block;
   padding-top: 5%;/* ---- top-left and top-right of border were not generated properly */
  /*margin-top: 5%; -------this works perfectly*/
}

<div class="main_wrapper">
  <h1>Interior Design</h1>
  <div id="showcase">
    <h2>Showcase</h2>
    <div class="category_wrapper">
      <div class="row">
        <div class="img-width col-md-6">
          <img src="img/atrium.jpg" alt="">
        </div>
        <div class="img-width col-md-6">
          <img src="img/kitchenconcrete.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вы в замешательстве , почему border-radius не применяется к верхним левым и верхним правым областям, где вы добавляете padding:

Это работает, даже когда вы добавляете padding - попробуйте добавить фон к элементу ::after, и вы поймете, почему ( подсказка : вы только определили bottom-border):

h2:after {
  content: "";
  width: 10%;
  border-bottom: 10px solid rgb(255, 0, 0);
  border-radius: 5px 5px 5px 5px;
  display: block;
  padding-top: 5%;
  margin-top: 5%;
  background: cadetblue;
}

<div class="main_wrapper">
  <h1>Interior Design</h1>
  <div id="showcase">
    <h2>Showcase</h2>
    <div class="category_wrapper">
      <div class="row">
        <div class="img-width col-md-6">
          <img src="https://via.placeholder.com/100" alt="">
        </div>
        <div class="img-width col-md-6">
          <img src="https://via.placeholder.com/100" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Если вы хотите, чтобы он работал с padding, просто добавьте фон и рамку на всех сторонах - см. Демонстрацию ниже:

h2:after {
  content: "";
  width: 10%;
  border: 1px solid rgb(255, 0, 0); /* border on all sides */
  border-radius: 5px 5px 5px 5px;
  display: block;
  padding-top: 5%;
  margin-top: 5%;
  background: red; /* background with same color */
}

<div class="main_wrapper">
  <h1>Interior Design</h1>
  <div id="showcase">
    <h2>Showcase</h2>
    <div class="category_wrapper">
      <div class="row">
        <div class="img-width col-md-6">
          <img src="https://via.placeholder.com/100" alt="">
        </div>
        <div class="img-width col-md-6">
          <img src="https://via.placeholder.com/100" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Это предполагаемое поведение.Ваши элементы в значительной степени сформированы как лук в слоях.Начиная снаружи, это поле - границы - отступы.Поскольку граница окружает заполнение, заполнение выталкивает границу.Это означает, что вы создаете внутренний квадрат в вашем элементе (просто состоящий из отступа).Затем это приводит к тому, что ваша граница-дно является плоской к вершине (там, где она касается внутреннего квадрата) и не получает закругленных границ.

Надеюсь, это поможет объяснить, что здесь происходит