Border Color

The CSS border properties allow us to specify the style and color of an element’s border.With CSS we can create styled border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.

Usage:

border-color: red;
border-color: #454545;
border-color: rgb(123,123,123);

Definition:

The border of any object can be set with any color using the tag/argument border-color. border-colorwill not take effect with out border style. Border style can be set using “border-style”.

It takes the following values:

red: The border color can be set using text names of colors.
#454545: The border color can be set using hexadecimal color code.
rgb(x,y,z): The border color can be set rgb code.

Example 1:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-style: solid;
border-color: red;
}
</style>
</HEAD>

<BODY>
<div class=”border1″>testing border color</div>
</BODY>

</HTML>

Result:

Click on example to view the page produced by above code.

Example 2:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: #454545;
}
</style>
</HEAD>
<BODY>
<div class=”border1″>testing border color</div>
</BODY>
</HTML>

Click on example to view the page produced by above code.

Example 3:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: rgb(125,125,125);
}
</style>
</HEAD>
<BODY>
<div class=”border1″>testing border color</div>
</BODY>
</HTML>