CODEWITHSUNDEEP
htmlcss
zac
zac

Reputation: 4888

How to make my corners rounded?

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>

Upvotes: 1

Views: 65

Answers (2)

Zuber
Zuber

Reputation: 3473

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>

Upvotes: 1

Mers
Mers

Reputation: 734

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>

Upvotes: 1

Related Questions