How do I Add Borders Around Your Elements?

I have no idea how to make the border, It says that I need to make a border but when I put what I have in so far nothing happens(no border appears)

Your code so far


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

  .smaller-image {
    width: 100px;
  }

  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</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" 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>

Maybe instead of this:

  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }

they expect the short version like:

.thin-red-border {
    border: 5px solid red;
  }

and to apply the class of thin-red-border to the requested element

It still did not add the border this is what it looks like:

You have created the class in css styling but you also have to use it to style the html requested img

How do you use it to style the html requested img?

something like <img class="your class name in here">

ohh hold on let me try that

Yayyy it worked thank you so much!

1 Like

Great. You are very welcome. :+1:

1 Like