freeCodeCamp Challenge Guide: Add Borders Around Your Elements

Guide
1

Add Borders Around Your Elements

Problem Explanation

To add a custom border around any HTML element, these three properties are used as shown below.

.className {
    border-width: 10px;  /*sets the width/thickness of border to 10 pixels*/
    border-color: pink;  /*sets the color of the border to pink*/
    border-style: solid; /*sets the style of the border to solid line type*/
 }

The same className should be used as the value for class attribute of the HTML element which has to be styled. Good Luck!

Solutions

Solution 1 (Click to Show/Hide)

We need to create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. and after, we need to apply the class to your cat photo.

We add between <style> and </style> new class thick-green-border with properties:

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

Also, we can add properties this way:

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

The final stage is adding this class to image:

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

Can any one help me? Where do I go from here?

.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;

}

CatPhotoApp

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.

1 Like
3

Hey Mikegontarek,

I think the extra space between the “border-style:solid;” and " }" (the last curly brace) underneath might be what’s stopping the border from appearing. I had the same issue with this example and it took hours to figure it out. I hope that helps.

Good Luck!

11 Likes
4

I need help please. Will anyone help

6

What is wrong here?

.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;}

CatPhotoApp

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

6 Likes
7

Eliminate the middle quotes in the img class to
A cute orange cat lying on its back.

27 Likes
9

Pls someone help me , as I dont know where to place the following code:

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

3 Likes
10

I pasted my comment here: https://pastebin.com/NX5R4AXC

11 Likes
11

thank you sooo much man

12

hii…please help me in coding

1 Like
13

All you have to do is reset the code and re-enter it
I was struggling with it for like 20 minutes until i just decided to redo it

1 Like
14

Thank you so very much @kilgora :slight_smile:

2 Likes
15

remember from here on out everything that changes the way a class looks will go under the style. that’s the code just change the parenthesis.

(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)

1 Like
16

Whatever test is checking this challenge is seemingly buggy. After spending entirely too much time entering and re-entering the css, applying it to the image, resetting the code, etc the only way I could get it to work was to enter a “style” element in my img tag in addition to the css class styling above. I am positive that the css I was entering was correct as I tested it on my own webserver to verify.

Here’s what I did:
…
.thick-green-border{
border-color: green;
border-width: 10px;
border-style: solid;
}

</style>

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

<img style="border-color: green; border-width:10px; border-style:solid;" class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

…

12 Likes
17

Just read that there was a brief slow-down and outage earlier when I was attempting this challenge. It is possible that is what caused my code not to fire when I posted this message, just wanted to make sure I presented “all the information” in case it’s not a buggy test :stuck_out_tongue:

1 Like
18

Here is the correct code. Enjoy

.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;
}

CatPhotoApp

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.

1 Like
19

Here is the correct snippet my friend.

.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;
}

CatPhotoApp

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.

21

if you notice the code
.thick-green-border is a highlight
because .smaller-image{ width: 100px; is missing this clossing bracket this one " } "
thats why cant appear the borders property…
hope it will help…

22

thanks! this worked … just replying to let everyone know!

1 Like
23

The correct way to do it is:

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

A cute orange cat lying on its back.

include THICK-GREEN-BORDER next to smaller image as a class. Hope it helps (:

1 Like