border-color - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-color

Description

The border-color CSS property is a shorthand property for setting the individual border color properties including:

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

The following table summarizes the border-color property.

Item Value
Default value: See individual properties
Applies to:All elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 

border-color:      [ color | transparent ] 1 to 4 values | inherit

This shorthand notation can take one, two, three, or four whitespace separated values.

  • If one value is specified, it applies to all border sides.
  • If two values are specified, the first value is used for the top and bottom border, the second value is used for the right and left sides.
  • If three values are specified, the first value is used for the top border, the second value is used for the right and left border, and the third value is used for the bottom border
  • If four values are specified, they are for top, right, bottom, and left, respectively.

Property Values

The following table describes the values of this property.

Value Description
color Set the border color.
transparent Allows the border to be transparent, it will occupy the space set by the border-width property.
initial Sets this property to its default value.
inherit takes the value of its parent element border-color property.

The example below shows the border-color property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-color property</title>
  <style type="text/css">
      p.one {<!--from www  . jav  a 2 s .c o m-->
          border-style: solid;
          border-color: #ff0000;
      }
      p.two {
          border-style: solid;
          border-color: #ff0000 #00ff00;
      }
      p.three {
          border-style: solid;
          border-color: #ff0000 #00ff00 #0000ff;
      }
      p.four {
          border-style: solid;
          border-color: #ff0000 #00ff00 #0000ff #ff00ff;
      }
  </style>
 </head>
 <body>
  <p class="one"><strong>one-value syntax:</strong>.</p>
  <p class="two"><strong>two-value syntax:</strong>.</p>
  <p class="three"><strong>three-value syntax:</strong>.</p>
  <p class="four"><strong>four-value syntax:</strong>.</p>
 </body>
</html>

Related Tutorials