border radius is not applying to image-CodePudding

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 ><div >
    <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>

CodePudding user response：

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 >
    <div >
      <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.

CodePudding user response：

add overflow: hidden css in .main class.

The problem is you have added radius to the parent of the image. When content overflow out of radius, they are visible by default.

So to hide the content you need to put overflow hidden.

CodePudding user response：

Try this, I have added border and set border-radius: inherit (this will simply set the border of child as per parent element's property) to img class.

@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 {
  max-width: 250px;
  width: fit-content;
  height: fit-content;
  background-color: hsl(0, 0%, 100%);
  align-items: center;
  align-content: center;
  padding: 1em;
  border-radius: 10px;
  overflow: hidden;
  text-justify: none;
  text-align: center;
  box-sizing: content-box;
}

.main .img {
  width: 100%;
  height: 250px;
  border: 1px solid black;
  border-radius: inherit;
}

.main p {
  text-justify: inter-word;
  text-align: justify;
}

.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 >
    <div >
      <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>

CodePudding user response：

You need to add the border to the image not the parent div your code should be something like this

.main img{ border-radius: 10px; }