June 8, 2016

border-color Property In CSS

The border-color property in CSS

We are continuing on with border properties in CSS. In the previous lesson, 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 created in the last lesson and adding the border-color property.

border-color property

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 lesson, 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>

Please Leave a comment