codescracker


css

CSS Border Color



« Previous Tutorial Next Tutorial »


The border-color

The border-color property specifies the color of the border. The border-color attribute in this property adds color to border.

Border colors are defined using one of the following values:

Value Description
Name Defines the name of the color, such as red and blue
Red Green Blue (RGB) Defines a RGB value, such as rgb(100,0,0)
Hex Specifies a hex value, such as #00ff00

The syntax of the border-color property is as follows:

border-color: value;

The border-color property values range from one to four. Here is the explanation of each case, one by one:

The following are the possible values of border-color property:

Value Description
Inherit Specifies that the border-color property is inherited from the parent element
Transparent Defines that the border-color should be transparent
Color Sets the border color to the specified color value

The border-color property uses different properties for each side, such as border-top-color, border-right-color, border-bottom-color, and border-left-color to set the top, right, bottom, and left border of a box.

Now let's learn about different properties of the border-color property. Let's first start with border-top-color property.

CSS border-top-color

The border-top-color sets the color of the top border of an element. Negative values are not allowed in this property.

If the border-top-color does not specify any border-color value, then the value of the color property is used instead.

The syntax to set the border-top-color property is as follows:

border-top-color: value;

The following are the possible values for the border-top-color property:

Value Description
Inherit Specifies that the border-color property is inherited from the parent element
Transparent Defines that the border-color should be transparent
Color Sets the border color to the specified color value

CSS border-right-color

The border-right-color sets the color of the top of an element. Negative values are not allowed in this property.

If the border-right-color does not specify any border-color value, then the value of the color property is used instead.

The syntax to set the border-right-color property is as follows:

border-right-color: value;

The following are the possible values for the border-right-color property:

Value Description
Inherit Specifies that the border-color property is inherited from the parent element
Transparent Defines that the border-color should be transparent
Color Sets the border color to the specified color value

CSS border-bottom-color

The border-bottom-color sets the color of the bottom border of an element. Negative values are not allowed in this property.

If the border-bottom-color specifies a no border-color value, then the value of the color property is used instead.

The syntax to set border-bottom-color property is as follows:

border-bottom-color: value;

The following are the possible values for the border-bottom-color property:

Value Description
Inherit Specifies that the border-color property is inherited from the parent element
Transparent Defines that the border-color should be transparent
Color Sets the border color to the specified color value

CSS border-left-color

The border-left-color sets the color of the left border of an element. Negative values are not allowed in this property.

If the border-left-color does not specify any border-color value, then the value of the color property is used instead.

The syntax to set the border-left-color property is as follows:

border-left-color: value;

The following are the possible values for the border-left-color property:

Value Description
Inherit Specifies that the border-color property is inherited from the parent element
Transparent Defines that the border-color should be transparent
Color Sets the border color to the specified color value

CSS border-color Shorthand

Refers to the shorthand form of border-top, border-right, border-bottom, and border-left properties.

The border-color property values range from one to four. All are described here:

CSS border-color Example

Here is an example shows how to set border color using CSS:

<html>
<head>
	<title>CSS Border Color Example</title>
	<style>
		.p1{ border-color:red; border-style:solid; padding:5px; }
		.p2{ border-color:#ff00ff; border-style:solid; padding:5px; }
		.p3{ border-color:rgb(0, 242, 5); border-style:solid; padding:5px; }
	</style>
</head>
<body>

<p class="p1">My border is colored using color name</p>
<p class="p2">My border is colored using color hex value</p>
<p class="p3">My border is colored using color rgb value</p>

</body>
</html>

Here is the sample output produced by the above CSS border color property example code:

css border color

Note - The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test