1

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Kazu25
  • 87
  • 1
  • 2
  • 13
  • With this minimal code, margin or padding makes no difference. It should be something else. – Amaury Hanser Apr 17 '19 at 11:47
  • try adding a `background` to the `:after` to see that the `border-radius` works but you only have `bottom-border` set right... – kukkuz Apr 17 '19 at 11:52

2 Answers2

2

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • @ kukkuz... Thank you for your answer. I can understand what you did... But my doubt why top left and top right areas dont get raddius is not clear. – Kazu25 Apr 17 '19 at 12:28
  • that's because `border` is set *around* the box `height` and `width`, `padding` of the box... but `margin` is *outside* the `border`... – kukkuz Apr 17 '19 at 12:31
0

This is intended behaviour. Your elements are pretty much shaped like an onion in layers. Starting from the outside it's margin - border - padding. As the border surrounds the padding, the padding pushes out the border. This means you create an inner square in your element (just consisting of the padding). This then leads to the effect, that your border-bottom is flat to the top (where it touches the inner square) and doesn't get the rounded borders.

I hope this helps explain what's happening here

Joscha
  • 240
  • 1
  • 11