Why won't border-radius work on bottom of the container?

Sven Vrgoc 0
Viewed 24

When I try to add a border radius to the container div it won't apply the border radius to the bottom, only to the top. Why is that? Why does it add only border-radius to the community div and not the price-benefits div? Can somebody please tell me why can't I add border-radius to the whole container

Border radius is only at the bottom

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/normalize.css"> 
    <link rel="stylesheet" href="styles/style.css" />
    <title>My Project</title>
  </head>
  <body>



    
    
    <div class="container">
      <div class="community">
        <h3>Join our community</h3>
      <h4>30-day, hassle-free money back guarantee</h4>
      <p>Gain access to our full library of tutorials along with expert code reviews. 
        Perfect for any developers who are serious about honing their skills.</p>
      </div>
      <div class="price-benefits">
        <div class="price col">
          <h4>Monthy Subscription</h4>
          <div class="price-dollars"><h3>$29</h3><p>per month</p></div>
          <p>Full access for less than &dollar;1 a day</p>
          <button><a href="#">Sign up</a></button>
        </div>
        <div class="benefits col">
          <h4>Why Us</h4>
          <ul>
            <li>Tutorials by industry experts</li>
            <li>Peer & expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our GitHub repos</li>
            <li>Community forum</li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
          </ul>
        </div>
      </div>
    </div>


    <script src="https://kit.fontawesome.com/b386b46c97.js" crossorigin="anonymous"></script>
    <script src="script.js"></script>
 
  </body>
</html>

SASS

@use '../1-helpers-colors/mixins' as *;
@use '../1-helpers-colors/variables' as *;



body{
    background-color: #E6EFF6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}



.container{
    width: 75rem;
    max-width: 100%;
    

    background-color: white;

    border-radius: 2rem ;

    .community{

        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;


        h3{
           color:  #45ADAC;
        }
        h4{
            color: #BFDF32;
        }
        p{
            max-width: 60rem;
            color: #A8ACB5;
        }
    }

    .price-benefits{
        display: flex;
    }
    .price{
        background-color: #2BB3B1;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        h4{
            color: white;
        }
        p{
            color: white;
        }
    }
    .price-dollars{
        display: flex;
        gap: 2rem;
        align-items: center;
        h3{
            color: white;
        }
        p{
            color: white;
            opacity: 0.5;
        }
    }

    .benefits{
        background-color: #4ABEBD;
    }
    .col{
        width: 50%;
        padding: 3rem;
    }

    button{
        background-color: #b0ca3a;
        padding: 1.5rem;
        border-radius: 0.5rem;
        border: none;
        a{
            color: white;
        }
    }
    .benefits{
        h4{
            color: white;
            margin-bottom: 1.5rem;
        }
        ul li{
            color: white;
            opacity: 0.5;
         }
         ul{
            display: flex;
            flex-direction: column;
         }

    }

    
    
}
sass css html
2 Answers

The price-benefits div is overflowing the container div. Add overflow:hidden to the container div to clip the price-benefits div, see below

body {
  background-color: #e6eff6;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 75rem;
  max-width: 100%;
  background-color: white;
  border-radius: 2rem;
  overflow: hidden;
  /* added this to clip the content */
}

.container .community {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.container .community h3 {
  color: #45adac;
}

.container .community h4 {
  color: #bfdf32;
}

.container .community p {
  max-width: 60rem;
  color: #a8acb5;
}

.container .price-benefits {
  display: flex;
}

.container .price {
  background-color: #2bb3b1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.container .price h4 {
  color: white;
}

.container .price p {
  color: white;
}

.container .price-dollars {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.container .price-dollars h3 {
  color: white;
}

.container .price-dollars p {
  color: white;
  opacity: 0.5;
}

.container .benefits {
  background-color: #4abebd;
}

.container .col {
  width: 50%;
  padding: 3rem;
}

.container button {
  background-color: #b0ca3a;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: none;
}

.container button a {
  color: white;
}

.container .benefits h4 {
  color: white;
  margin-bottom: 1.5rem;
}

.container .benefits ul li {
  color: white;
  opacity: 0.5;
}

.container .benefits ul {
  display: flex;
  flex-direction: column;
}
<div class="container">
  <div class="community">
    <h3>Join our community</h3>
    <h4>30-day, hassle-free money back guarantee</h4>
    <p>Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.</p>
  </div>
  <div class="price-benefits">
    <div class="price col">
      <h4>Monthy Subscription</h4>
      <div class="price-dollars">
        <h3>$29</h3>
        <p>per month</p>
      </div>
      <p>Full access for less than &dollar;1 a day</p>
      <button><a href="#">Sign up</a></button>
    </div>
    <div class="benefits col">
      <h4>Why Us</h4>
      <ul>
        <li>Tutorials by industry experts</li>
        <li>Peer & expert code review</li>
        <li>Coding exercises</li>
        <li>Access to our GitHub repos</li>
        <li>Community forum</li>
        <li>Flashcard decks</li>
        <li>New videos every week</li>
      </ul>
    </div>
  </div>
</div>

userurKQ0

try this:

add border-radius to price-benefits like this:

.price-benefits{
   display: flex;
   border-radius: 10px;
}
Mazdak0
Related