CODEWITHSUNDEEP
htmlcss
bibs
bibs

Reputation: 3

issue with border radius

I'm new to html/css and I know this has been asked many times before but the answers didn't help / could not comprehend them. I assume it has something do to with the way I arranged the page in on the html side. Thanks

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div.img {
  opacity: 0.3;
  border-radius: 44px background-color:#555;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Let Go</title>
</head>


<body>
  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>
</body>

</html>

Upvotes: 0

Views: 47

Answers (2)

Johannes
Johannes

Reputation: 67799

TWo mistakes: The selector has to be div.img img to affect the image itself, and there was a semicollon missing:

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div.img img {
  opacity: 0.3;
  border-radius: 44px;
  background-color: #555;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Let Go</title>
</head>


<body>
  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>
</body>

</html>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65873

Do the radius on the image, not the element that contains it. Also, you are missing a semi-color before you set the background color

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div img {
  opacity: 0.3;
  border-radius: 44px; 
  background-color:#555;
}
  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>

Upvotes: 1

Related Questions