Add Borders Around your Elements


Having trouble completing thisYour img element should have the class smaller-image.
Your img element should have the class thick-green-border.
Give your image a border width of 10px.
Give your image a border style of solid.
The border around your img element should be green.

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;

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

.smaller-image {
width: 100px;
border-width: 10px;
border-style: solid;
border-color: green;


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.


Can you copy and paste your code. Like the who image and where you put the class?


Sorry, I am not sure what you are asking me to do?


Ok, I’m going to try figuring this out from what you said.

Look at your HTML code. Specifically, look for an img element, which should look something like this:

<img src=""> 

Note: The link is going to be completely different than what I used above.

Alright, so once you’ve found that, you’re going to include the class that it is asking for(that is, smaller-image).

To add a class to an image, you’d do something like this:

 <img src="" class="add-class-here">

I noticed you mentioned two images, so add the appropriate class names to each image, if they’re not already there.

Now, the images are out of the way, and what it is asking you to do to them is to style the images with the following:

  • The border’s width should be 10px

  • The border should be solid.

  • The border’s color should be green.

Perhaps try to combine your three rules.

So instead of this:

  border-width: 10px;
  border-style: solid;
  border-color: green;

try to condense it into a single line. I could be wrong, but I think that’s what the challenge is asking for.