Border-Color: Web Design Series: CSS Part 9

border-color

The border-color: property in CSS.
Get the source code for this lesson at the end of this post!

We are continuing on with border properties in CSS. Yesterday, we learned how to create a border around an HTML element using the border-style: property. If you are not adding your border shorthand(We will learn this in the future), you must have the border-style property in order to have a border display on your web page. Today, we are going to learn the “border-color:” property. So, below we have our first few examples of adding color to our borders. We are using the same border code that we made yesterday and adding the border-color property.

border-color code

border-color display

In our first set of examples, we used the three methods of adding color to a web page using CSS. First in our h4 rule with “border-color: blue;“, Second in our p rule with “border-color: #FF0000;“, and finally in our ol rule with “border-color: rgb(0,255,0);“. When we run our updated code in a browser, we now have a blue solid border around our h4 element, a red dashed border around our p element, and a green double lined-dashed border around our ol element.

Very simple so far right? As we’ve already learned in the methods of adding color in CSS post, You have these three options to choose from when adding color. One of the 16 primary colors is best when you just need a simple color. RGB and hex values should be used when you want to create a unique color(Over 16 million possibilities). You can use just one or all of these methods of adding color for any element on your website that needs it-background colors, border colors, font colors, hover effect colors; it goes on and on.

Just like the way we added multiple styles to our border, we can target each side with color too. The same rules apply. If you have four values, the side that gets affected is in this order: Top, Right, Bottom, Left. To see an example of that check out the new code below.

multiple color border code

multiple color border display

I have replaced the RGB value for the border-color property in the ol rule with four primary colors. We could have used RGB’s or hex values but I thought that this would simplify things a bit. When we save our updated code and run or refresh the browser, the ordered list now has a border with a blue top, red right side, green bottom, and yellow left side border. Take notice that when we enter our four values for the multi-colored border, we don’t use any comma’s to separate; just a space between each color. And we end up with this cool multi-colored border. Try using two or three colors to see what results you get. When we finish learning all of the border properties, you will be able to create countless border designs to use in your website design.

An important thing to know here is that you should always create your border-style before your border-color so that you don’t run into any problems. You need to have a border first before you can style its color. So border-style property first, then border-color under it in your CSS rule.

Some other CSS values that are used within the border-color property are: transparent, color, inherit, and initial. This is more advanced CSS, and wouldn’t be of much value to you right now, but I wanted to add these values in here so we didn’t skip anything.

Source Code

<!DOCTYPE html>
<html>
<head>
<title>The Border Property</title>
<style>
h4{
border-style: solid;
border-color: blue;
}
p{
border-style: dashed;
border-color: #FF0000;
}
ol{
border-style: double dashed;
border-color: blue red green yellow;
}
</style>
</head><body>
<h4>BORDERS IN CSS</h4>

<p>This lesson is all about borders. We are going to learn how to add borders to elements and add style to them.</p>

<ol>
<li>border-style</li>
<li>border-width</li>
<li>border-color</li>
<li>border-radius</li>
</ol>
</body>
</html>

For those of you who are following along with this web design in CSS series, there will be no post tomorrow. I’m going to go back through all of the posts and add the lesson source code at the bottom for each. This way you can copy and paste the lesson directly into your text editor like in this post. And if the images are hard to make out on your computer screen, the source code will be much clearer. Thanks for reading, I’ll see you next time.

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: