Div doesn't apply border-radius property

Question

I have a <div> tag, on which I need a bottom border and border radius to be applied, but it won't work.

 .part2 { border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 0px; padding-bottom: 60px; background-color: #fafafa; } .part3 { background-color: #EFEFEF; border-color: pink; border-style: solid; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 0px; padding-bottom: 100px; }

 <div class="part2 col-md-12 col-lg-12"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div class="part3 col-md-12 col-lg-12 pt-40"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div class="part4 col-md-12 col-lg-12"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div>

So basically it shows up like that :

So my problem is : I have a page on my website, which contains many <div> . Each div as a .part1, .part2 etc.. class on them. I need the borders of each .partX div to have a curved border bottom. It works for the header, it works for .part4, but it doesn't work for .part3. That's the mystery, and I'm trying to solve it. I need to have the border of div.part3 curved, so I'm using border radius, but it doesn't work at all. Why ?

Above is the result of the css code I used. As you can see the border is straight, I need it curved.

Answer 1

I can only assume there's some bad practices further up the style inheritance tree. Without seeing more of the layout to inspect it's hard to tell why one works and the other doesn't but I'd bet if you inspected them in the developer console and paid attention to the order of inception of the style classes you could find your culprit(s).

However, most of this could be consolidated;

 .part2, .part3, .part4 { border-width: 0; /* Not 0px */ border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; } .part2 { padding-bottom: 60px; background-color: lightblue; } .part3 { background-color: #EFEFEF; border: pink 5px solid; padding-bottom: 100px; } .part4 { padding-bottom: 60px; background-color: #0f0; border: orange 5px solid; }

 <div class="part2 col-md-12 col-lg-12"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div class="part3 col-md-12 col-lg-12 pt-40"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div class="part4 col-md-12 col-lg-12"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div>

Hope this helps, cheers.