Almost similar looking solution using Internal CSS

Community feedback

• 

  StanishCode•90

  @StanishCodePosted over 1 year ago

  Using the overflow property on a parent container for an image is an easy way for the parent div and the image to have the same border radius. An important note, the image must be as big as the parent container.

  .image-div { display: inline-block; border-radius: 20px; overflow: hidden; } .image { text-align: center; padding: 15px; width: 100%; height: 100% }

  Marked as helpful

  1
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  • If you want to make the card centered correctly, you'd better add flexbox and min-height: 100vh to the body

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • If you use flexbox in the body, you don't need to use margin in the .main-div to center the card
  • If you use max-width instead of width, it makes the card responsive and you can reduce the width a bit if you want
  • If you want to give the gap between the content and the border of the card, you can use padding
  • I've given border-radius: 5%; to .main-div and it works. You can update it if you want

  .main-div {
     /* margin: 10% auto 10% auto; */
     /* border-radius: 15px; */
     border-radius: 5%;
     background-color: white;
     /* width: 330px; */
     max-width: 280px;
     padding: 15px;
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% for the img in this way:
  • Again, I've given border-radius: 5%; to .image and it works

  .image {
      /* text-align: center; */
      /* padding: 15px; */
      /* width: 300px; */
      width: 100%;
      /* border-radius: 10%; */
       border-radius: 5%;
  }
  

  • You don't need .image-div and you can remove it

  /* 
  .image-div {
     display: inline-block;
     border-radius: 20px;
  } 
  */
  

  • If you reduce padding of p, it would look better

  p {
    /* padding: 40px; */
     padding: 10px; 
  }
  

  Hope I am helpful. :)

  0