How to make my corners rounded?

Question

In this design I set in the CSS to have rounded corners but only the two corners at the top are not. How I can make them also rounded ?

 .pricing-page li { width: 32%; float: left; text-align: center; display: inline-block; box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19); background-color: red; margin-right: 10px; border-radius: 10px; } 

 <ul class="pricing-page"> <li class="animated bounceInLeft delay-250"> <div style="background-color: #0169b2"> <div style="text-align: left; width: 10%; padding: 5px 0 0 5px;"><img src="assets/images/image.png"></div> <h5>Dedicated Server</h5> <p>There are many variations of passages of Lorem Ipsum available.</p> <span><b>From</b></span> <div class="price">80$<span>/month</span></div> </div> <div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </li> </ul> 

Answer 1

You have to set border-radius to your div that's nested within ul : the div that has the background-color of #0169b2 , like so:

 ul.pricing-page div{ border-top-left-radius: 10px; border-top-right-radius: 10px; } .pricing-page li { width: 32%; float: left; text-align: center; display: inline-block; box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19); background-color: red; margin-right: 10px; border-radius: 10px; } 

 <ul class="pricing-page"> <li class="animated bounceInLeft delay-250"> <div style="background-color: #0169b2"> <div style="text-align: left; width: 10%; padding: 5px 0 0 5px;"><img src="assets/images/image.png"></div> <h5>Dedicated Server</h5> <p>There are many variations of passages of Lorem Ipsum available.</p> <span><b>From</b></span> <div class="price">80$<span>/month</span></div> </div> <div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </li> 

Answer 2

You can set border-radius: 10px 10px 0 0 to parent div

 .pricing-page li { width: 32%; float: left; text-align: center; display: inline-block; box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19); background-color: red; margin-right: 10px; border-radius: 10px; } 

 <ul class="pricing-page"> <li class="animated bounceInLeft delay-250"> <div style="background-color: #0169b2; border-radius: 10px 10px 0 0;"> <div style="text-align: left; width: 10%; padding: 5px 0 0 5px;"><img src="assets/images/image.png"></div> <h5>Dedicated Server</h5> <p>There are many variations of passages of Lorem Ipsum available.</p> <span><b>From</b></span> <div class="price">80$<span>/month</span></div> </div> <div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </li> </ul>