Color is an integral part of creative design and user interaction. It can make or break a website’s design in the same way a badly placed sign can deter or attract customers to a restaurant. 

Using defined borders on an HTML page works to focus attention where it is needed.  However, applying the use of border colors can take that ability to another level. This is where the CSS border color property comes into play.

The CSS Border Color property was created to allow the designer to implement a coloring for a boxed border. For example, a highlighted section of a selected menu item or a bright border around a special item on sale for the week. In this brief tutorial, the concepts of how to understand and use the border-color property will be explored.

Setting up the Work Space:

Before getting started with the guided tutorial, a common workspace needs to be set up. In this introduction section, sample code for both a simple HTML and CSS file will be provided to help beginners get started. If you are already familiar with HTML, feel free to use your own file and selectors. 

HTML Sample Code

In this tutorial, you can follow along with the basic code details provided below or create your own.  In the HTML code snippet below, you can see the basic HTML page is setup.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS Border Color Basics</title> 
        <link rel="stylesheet" href="CSSBorderColor.css">
    </head> 
    <body> 
        <div>Welcome to Udacity CSS!</div>
    </body> 
</html> 

With the HTML page saved and ready, you can move along to set up a CSS stylesheet for use.  Note that one is already mentioned in the code above with the title set as “CSSBorderColor.css” for the example.  Remember that this linked stylesheet should have the same name as the actual stylesheet you create.  If you use another file name, be sure to mirror that choice in the link used on the HTML code.

CSS Sample Code

With the HTML page set up, your CSS page should come next. You can use the sample code below to follow along with the examples moving forward or create your own if preferred.  

div {
border-style: solid;
     border-color: red;
width: 300px;
}

Note:  For this example, the “width” property has been set to provide an easier-to-see box design on the HTML page. The values of the border-style and border-color will also be explained below.

With this sample code loaded and saved, the HTML sample page can be loaded into a web browser to view the effects of the code applied. With the provided sample, the expected output should appear as shown in the image below.

With these steps complete, you can now move on to the next steps detailing the various options provided with the CSS border-color property.

Changing the Border Color

To change the border color for this example, you will have to alter the values in the CSS file for the border-color property.  

Note: If you are not familiar with the syntax of CSS or need more information on what a selector, property, or value might be, please read through the “Basics of CSS” post for a quick and helpful boost.

Inside the CSS file, you will look for the “border-color” property as highlighted in the example shown below.  This is where you will alter the value for the color to be used on the HTML page.

div {
border-style: solid;
     border-color: red;
width: 300px;
}

Currently, the value assigned to the border-color property is set to the color red. If you wanted to change the color value to purple, it would be as easy as replacing the value itself.  In the example below, this has been done to create a purple border for the box around the div element.

 div {
border-style: solid;
     border-color: purple;
width: 300px;
}

Once saved and reloaded, the HTML page should have the following appearance change to the border.

As can be seen in the image above, the CSS border color has changed to the provided color value of purple. Changing the color to another value is as simple as trying in a new color such as blue, white, or black. However, that is not the only option we have available to us.

Changing the Border Color Using Hex Codes

Using solid simple color definitions will provide a respectable border framing for the elements being worked with. However, there are times when the color choice needs to be refined and set to specific demands for the site design.  For this purpose, the border-color property can also be set to use Hexadecimal Codes, (or Hex Codes for short).

In the example provided below, the color property has been altered to a darker shade of green using a Hex Code. The codes will always begin with a pound symbol followed by the determined set of numbers or letters that define the particular color to be used.

div {
    border-style: solid;
    border-color: #109722;
    width: 300px;
}

With this sample saved and then reloaded with the HTML page, the following should appear on the screen.

The border color has changed to the specified color as provided by the Hex Code. Take note that there are many resources to help you refine the CSS border color you want to use as well as provide a Hex Code to accompany it. In this sense, it is not necessary to feel the need to know all of these codes at the top of your head. No need for extra stress on that.

Setting CSS Border Color with RGB Values

CSS is all about providing great options for design. In this sense, you can also choose to add color through the use of RGB values as well. RGB stands for red, green, and blue. These values are added using the following format.  

rgb(0, 0, 0)  

The first zero is the value of red, the second is that of green, and the last is the value of blue.  The values all range from 0 to 255 each. The values are all taken together to determine the color to be applied.  

For example, a value of “rgb(0,0,255)” would weigh all the color values towards the color blue in totality. This would give you a blue border on the site. Alternatively, using the values of “rgb(120,50,100)” would provide mixing of the colors giving a dark purple background.      

See the code example below to see how this is implemented into the CSS.  

div {
       border-style: solid;
       border-color: rgb(120,50,100);
       width: 300px;
}

This code will provide a dark purple border as described above.

Setting CSS Border Color with HSL Values

Finally, you have yet another avenue for color value options with the use of HSL.  HSL represents the values of hue, saturation, and lightness regarding the color spectrum. To use this value, you set the syntax as shown below.

    border-color: hsl(223, 100%, 63%);

This would provide the border with a light blue background as shown in the example image below.

Defining CSS Border Color for Specific Border Sides

The border colors can be applied to corresponding sides of the border itself. They follow the clockwise path of the top, right, bottom, and left sides.  Take the example below to see how it is applied and the resulting output in the screenshot.

div {
border-style: solid;
    border-color: cyan black red purple;
    width: 300px;
}

Note: No commas are separating the color values!

This will provide a border with the mixed colors as shown here.

The full four sides do not have to be declared as with the example above. Take the following setup below where only two colors are put into the value.

div {
    border-style: solid;
    border-color: blue red;
    width: 300px;
}

With just the values of blue and red applied, the top and bottom border take the blue value with the left and right border sides taking the red value. This leads to the following output as displayed below.

A Few Extra Tips on CSS Border Color

Working with borders can add a great dynamic punch to various elements of an HTML page.  Some notable concepts to remember for this include the border-width and border-style properties. If the former is set to zero, it will not allow the border to be seen. The same effect can happen with the latter if the value is set to either “none” or “hidden.”  These properties are great to keep in mind so all that wonderful CSS border color work does not go unnoticed.  

You should also pay attention to how the border color interacts with other elements of the page.  If the CSS background scrolls with the user navigation, it could hamper the coloring for an area that has defined border colors.  In this case, adding a background to the element to go along with the border could be useful.  

Lastly, using the various border-style values can also allow for further refinement of the design. Options such as dotted, ridged, or dashed can work to either stand out or blend in as needed for a better UI/UX offering for the end-user. Ultimately, caring about how the layout is presented in both artistic and practical design allows for greater use of the CSS toolkit.

___________________________________________________________________

The modern world runs on code and that code comes from people like you.  If you are looking to fly farther and stronger than ever before, take the first steps with code.  Learning to code can help you open doors to those new possibilities of a better you.  Embrace Udacity’s Intro to Programming Nanodegree program today to start the journey.

Start Learning