Add Borders Around your Elements (none)

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>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

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

  .smaller-image {
    width: 100px;
  }
  
  
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

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

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/add-borders-around-your-elements

#2

You have to add another class to your img tag <img class=“smaller-image thick-green-border”

and in your <style> to give border for thick-green-border class

Like this:(in your <style>)

 .thick-green-border {
    border: 10px solid green;
  }
#3

Will someone please look at this code above, I cannot seem to get a green border??

#4

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

You have to put this class: thick-green-boarder next to “smaller-image”,
not class1=“thick-green-boarder” .
Just type this: <img class=“smaller-image thick-green-border”>

#5

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

#6

like this ?
A cute orange cat lying on its back.

#7

You define classes between " " … If you have more than one class, like 3 classes… You type all 3 classes in same " " …
<img class=“class1 class2 class3 class4” (see how is every class in same (ONE) " ")

not <img class=“class” class1=“class1”

1 Like
#8

<img class="smaller-image thick-green-boarder"
like that

#9

Thats right… So if you have 3 classes, you type all 3 classes in same “” :slight_smile:

#10

i’'m still not getting a green boarder around this damn cat. Thanks for your help.

#11

Try this:
.thick-green-border {
border: 10px solid green;
}

Just read carefully what you have to do :slight_smile:

#12

This is what finally worked:
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
}

CatPhotoApp

A cute orange cat lying on its back.

#13

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

#14