Changing Spelling of "Color" Changes Border to Blue

Hi

Can anybody explain why the colour of the border changes from green to blue when I change the class attribute from “border color” to “border colour”.

The code below works but delivers a blue border even when the colour is set to green.

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


</style>

<h2 class="red-text ">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

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

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.119 Safari/537.36.

Challenge: Add Borders Around Your Elements

Link to the challenge:

1 Like

border-colour is not a valid css property

you need to write border-color

I don’t know where the blue color comes from, maybe it’s some kind of default value…

1 Like

Good questions. The spelling of color is the one from the United States, this is defined in something called the specs. You can check an example here. It’s rather boring and complex to read, but sometimes it’s the only place where you can find a solution.

Respect to the blue color, I just consulted that CSS spec.

This is the definition therein:

currentColor
The value of the ‘ color ’ property. The used value of the ‘ currentColor ’ keyword is the computed value of the ‘ color ’ property. If the ‘ currentColor ’ keyword is set on the ‘ color ’ property itself, it is treated as ‘ color: inherit ’.

Now if I understand properly when the color is not set using
border-color: <color> then the value is taking from the color property of itself, or from a parent.

If you include this lines:

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

you’ll see the green color in the border!

border-color:red; if you uncomment will overwrite with red color.

Finally: where does the color:blue comes from then? I looked at the browser developer tools (which is the way we can cheat and create better websites), and there is no blue color elsewhere.

The reason is that the property should come from the browser style sheet. And if you inspect the ‘computed’ tab you’ll find a blue color, and is most probably coming from the default style for the anchor tag, defined in the browser stylesheet (and set to blue).

Edit
A behaviour that goes along with the previous ideas is that, if you click on the image the border switches to purple, as does any link color.


In some sense, it’s what @ilenia said, a default styling.

1 Like