Basic CSS: Add Rounded Corners with border-radius - Question

**Hello everyone. My name is Rachelle, I hope everyone is doing well today. I’m having an issue with my lesson. I can’t pass this test, I keep failing the part that says: " Your image should have a border radius of 10px" But, my image does have the border radius of 10px, I watched the video and I saw it was correct and I ran it through an HTML validator and nothing shows up, I’m sure it’s something tiny that I’m missing, can someone point it out for me, please? Thank you in advance for your help.

Your code so far


<!DOCTYPE html>
<head>
<title></title>
<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;
  boder-radius: 10px;
}

.smaller-image {
  width: 100px;
}
</style>
</head>

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

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Add Rounded Corners with border-radius

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-rounded-corners-with-border-radius

isn’t that last dash a bit to the left respect to the others? as the first word is always the same first word they should all be one below the other

You miss spelled border-radius. Once you fix that, it should work.

1 Like

OMG! That’s it! I haven’t even checked it yet, but I know that is it!! Thank you so much! I was going out of my mind over something so small… thank you again!

You’re very welcome! Trust me, that happens all the time in programming! It does to me at least!

1 Like