Rounding Applied to Wrong Element

HTML-CSS
1 
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }

  .smaller-image {
    width: 200px;
    border-radius: 10px
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

What is happening? In this border-radius excercise, the rounding was applied to the image but it’s the border that got rounded! The image has sharp 90 degree angles. I thought the corners of the image would get rounded not the border.

2

Is this the lesson you are working on?

If not, please provide the link to the lesson

3

you forgot the " ; " at the end that is why it isnt running.

4

No - this is the lesson that I am referencing -


I have been chastised by another tutor on the forum for not providing a link to the lesson that I am referencing and OK - obviously this is something that I should do but I’ll ask you - just as I have asked him - is my quoted code not enough for you to see and comment on the problem?
5

Well, since html and css are visual markup languages, it is always nice to see the problem for ourselves.

The border radius of 10px is not going to round the image that much and still the look the same. But if you increase the pixels you will notice the image start to round more.

Screen Shot 2020-12-24 at 7.47.55 AM

6 
  .smaller-image {
    width: 100px;
    border-radius: 10px

Thanks for the response Amir but I don’t think that is the issue because - even when I write the code as above (leaving out the “;” the rounding does happen - it’s just that the rounding is applied to the border, not the image. I thought that the image would be what got rounded so that it would look like this -Screen Shot 2020-12-24 at 8.40.51 AM
an image with rounded borders surrounded by a border that has sharp 90 degree angles.
While I am on the subject, I am wondering why the border is a CSS property. I thought that a border would be something that should be specified within the body tags and the CSS would then be used to style the appearance of the border. That’s the way html works with all the other elements.

7

Also, in the html you have this.

class="smaller-image thick-green-border"

which explains why both the border and image are changing.

You also have this note in the lesson.
Note: This challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class.

8

“smaller-image thick-green-border”
So because both class elements are within the same " " that means applying a style to either, affects the other as well?

9

Well, when I played around with the code I tried taking the thick-green-border out of the img element and placing it in a separate div and got this result.

Screen Shot 2020-12-24 at 8.19.23 AM

  <div class="thick-green-border"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></div>

 .thick-green-border {
    border-color:green;
    width:120px;
    border-width: 10px;
    border-style: solid;
  }

  .smaller-image {
    width: 100px;
    border-radius:10px;
  }

I am not a css expert, but I think since the classes were applied to the same img element that’s why they were originally both changing.

Maybe one of the pros has a better answer to provide but that was my observation from screwing around with the code a little bit.

10

Ah! Brilliant answer yielding exactly the result that I had envisioned - a rounded image within an “unrounded” border.

Screen Shot 2020-12-24 at 10.11.39 AM
Screen Shot 2020-12-24 at 10.11.39 AM920×910 144 KB

This was an “out of the box” solution though, one I would never have thought of and one that wasn’t even alluded to in the lesson. But it worked great! So the lesson learned here - is that there’s more than one way to skin a cat! Thanks for the time you took with this puzzling aspect of code. Puzzling for me at least.