Having trouble adding a border around my HTML element

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Cloned every code displayed in the video tutorial yet the run test program is asking me to make my border green which I already did…

  **Your code so far**


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
}

.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

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

.smaller-image {
  width: 100px;
}
</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>

<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="https://freecatphotoapp.com/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/92.0.4515.159 Safari/537.36

Challenge: Add Borders Around Your Elements

Link to the challenge:

2

The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

3

Wow your response is so ingenious…, yeah my chrome browser use a Dark-mode extension any idea how I can disable it…

4

How do I set my browser level to 100%?

5

Google is your friend :grinning:

6

Thanks got a hold of it finally scaled the test… and thanks for caring and paying close attention to me…

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.