htmlcssbox-sizing

Padding doesn't allow pseudo elements to create border-bottom

I try to create the border bottom radius for h2 elements using pseudo elements. But When I apply padding, top-left and top-right of border-bottom-radius were not reflected. But if I applied margin, it was reflected. I can't understand why this happen

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>

Solution

  • You are confused why the border-radius is not getting applied to the top left and top right areas whey you add padding:

    It works even when you add padding - try adding a background to the ::after element and you'll understand why (hint: you only have defined 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>

    If you want it to work with padding, simply add a background and border on all sides - see demo below:

    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>