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:
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.
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. ">
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
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…