Arrow
Logo

CSS

Introduction to Cascading Style Sheets

CSS Selectors

CSS color property

CSS Background Color

CSS Background Image

CSS Background Repeat

CSS Background Gradients

CSS Background Size

CSS Background Blend Mode

CSS Background Clip

CSS Background Attachment

CSS Background Position

CSS Background Origin

CSS Font Family

CSS Font Size

CSS Font Style

CSS Font Weight

CSS Font Variant

CSS Text Color

CSS Text Alignment

CSS Text Align Last

CSS Text Direction

CSS Vertical Align

CSS Text Decoration

CSS Text Decoration Line

CSS Text Decoration Color

CSS Text Decoration Style

CSS Text Decoration Thickness

CSS Text Transform

CSS White Space

CSS Overflow

CSS Overflow X

CSS Overflow Y

CSS Text Overflow

CSS Text Shadow

CSS Text Spacing

CSS Letter Spacing

CSS Word Spacing

CSS Line Height

CSS Text Indent

CSS Links

CSS Border

CSS Border Color

CSS Border Style

CSS Border Width

CSS Border Color

AuthorHariom Prajapati

Pubish Date25 Nov 2022

categoryCSS

It is allow you to specify how the border color should look like.

 

Syntax -

border-color: color_value;

 

Some rules are :-

  • If we use one color value in border-color property then color of all four side of the border will same color.
  • If we use two color value in border-color property then, first color value use in top and bottom border color but second color value use in right and left border.
  • If we use three color value in border property then , first color value use in top border , second color use in bottom border and third color use in left & right border.
  • If we use four color value in border property then , first color  value use in top border,second color value use in right border , third color value use in bottom border and fourth color  value use in left border.(it start from top border and move clockwise to left)

 

If there is only one color value in border color property :

border-color: red;

  1. Color of all four borders are red.

 

If there is two color values in border color property:

border-color: red green;

  1. Color of top and bottom borders are red.
  2. Color of right and left borders are green.

 

If there is three color values in border color property:

border-color: red green blue;

  1. Color of top border is red.
  2. Color of right and left borders are green.
  3. Color of bottom border is blue.

 

If there is four color values in border color property:

border-color: red green blue pink;

  1. Color of top border is red.
  2. Color of right border is green.
  3. Color of bottom border is blue.
  4. Color of left border is pink.

 

For example:-

<!DOCTYPE html>
<html>

<head>
	<title>CSS Border Color</title>

	<style>
		.one_color {
			border-style: solid;
			border-color: #0000ff;
		}

		.two_color {
			border-style: solid;
			border-color: red yellow;
		}

		.three_color {
			border-style: solid;
			border-color: red green blue;
		}

		.four_color {
			border-style: solid;
			border-color: red green yellow pink;
		}
	</style>
</head>

<body>
	<h4 class="one_color">One-colored border!</h4>
	<h4 class="two_color">two-colored border!</h4>
	<h4 class="three_color">three-colored border!</h4>
	<h4 class="four_color">four-colored border!</h4>
</body>

</html>

 

Output

Css Border Color