I can't create border around my image please help

HTML-CSS
1

Tell us what’s happening:

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 (Linux; Android 8.1.0; itel A16 Plus) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Mobile Safari/537.36.

Challenge: Add Borders Around Your Elements

Link to the challenge:

2

Hello! there are a couple things that are preventing that from happening, first you have:

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

When it should be:

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

As you can see, you were missing the hyphens, without them css doesn’t recognize them as properties, so when you’re defining a property of a element
you should always use hyphens instead of spaces, the other thing is this:

<img class="smaller-image""thick-green-border">

When you’re defining class names for an element you don’t have to put each class name inside its own quotation marks, you can define multiple classes for an element putting all of them inside the same pair of quotation marks, you only need to add a space between each class name, like this:

<img class="smaller-image thick-green-border">

Hopefully this helps you, keep up the good work :grin:

1 Like