Search code examples
htmlcssfont-familygoogle-font-apiborder-radius

border radius is not applying to image


i am trying to comlete frontenmentor io challenges.I am as beginner in html and css i applied border radius as 10px to the image to round the edges of image. but it is not reflecting. also i added outfit as font family.but it is also not reflecting.i have given the html/css code here.Kindly help me to fix this

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

*body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: hsl(212, 45%, 89%);
}

.main{
    width: 300px;
    height: 500px;
    background-color: hsl(0, 0%, 100%);
    align-items: center;
    align-content: center;
    text-align: center;
    border-radius: 10px;
}

.main .img{
    width: 250px;
    height: 250px;
    padding: 1rem;
    
}

.container{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}

.main h1{

    font-family: "outfit" sans-serif;

}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  
  <title>Frontend Mentor | QR code component</title>

 <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container"><div class="main">
    <img class= "img" src="/images/image-qr-code.png">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
  </div>
</div>



 
</body>
</html>


Solution

  • The border-radius needs to be applied to the .img. However, you won't see it given there is also a padding of a greater amount (1rem). This snippet removed that so you get to see the border-radius.

    To increase the generality, as you have given a fixed width and height to the img, I have included an object-fit: contain to ensure all the image is always seen whatever its aspect ratio (you could alternatively use cover to ensure that full size is covered, though it could mean there is some cropping of the image).

    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
    *,
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: hsl(212, 45%, 89%);
    }
    
    .main {
      width: 300px;
      height: 500px;
      background-color: hsl(0, 0%, 100%);
      align-items: center;
      align-content: center;
      text-align: center;
      border-radius: 10px;
    }
    
    .main .img {
      width: 250px;
      height: 250px;
      object-fit: contain;
      border-radius: 10px;
    }
    
    .container {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    
    .main h1 {
      font-family: "outfit" sans-serif;
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- displays site properly based on user's device -->
    
    
      <title>Frontend Mentor | QR code component</title>
    
      <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    
      <div class="container">
        <div class="main">
          <img class="img" src="https://picsum.photos/id/1015/300/300">
          <h1>Improve your front-end skills by building projects</h1>
          <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
        </div>
      </div>
    
    
    
    
    </body>
    
    </html>

    Note, there was also a *body at the start of the CSS. I have just guessed that you meant to remove default margin etc from all elements.