Borders around elements

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-width:10px;
    border-color:green;
    border-style:style;
  }
</style>

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

<img class="smaller-image thick-green-border" 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36.

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

why image an border not displaying …help help

i have closed image tag. in my code …still no go

Had to go in and look but for one:

Give your image a border style of solid.

Thank you Darren,

i did change the style to soild , however code is still not working

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

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

.smaller-image {
width: 100px;
}

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

CatPhotoApp

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

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

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

.smaller-image {
width: 100px;
}

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

CatPhotoApp

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

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

is that cut and past code? I ask because you CatPhotoApp is missing the red-text class… and the kity ipsum text is mising the <p> tags…

What error messages are you getting when you run it?

border-style: solid; instead of border-style: style;

Thank you Darren and glaspswidr. i just had to reset my code and type again .Now the code works.

1 Like

awesome!

Happy Coding!