Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - border-color


previous next AddThis Social Bookmark Button


Advertisements

Description:

The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties:

  • border-bottom-color changes the color of bottom border.

  • border-top-color changes the color of top border.

  • border-left-color changes the color of left border.

  • border-right-color changes the color of right border.

Possible Values:

  • color: Any valid color value.
  • transparent: Sets the border to be invisible.

Applies to:

All the HTML elements.

DOM Syntax:

object.style.borderColor="red";

Example:

Here is the example which shows effect of all these properties:

<style type="text/css">
p.example1{
   border:1px solid;
   border-bottom-color:#009900; /* Green */
   border-top-color:#FF0000;    /* Red */
   border-left-color:#330000;   /* Black */
   border-right-color:#0000CC;  /* Blue */
}
p.example2{
   border:1px solid;
   border-color:#009900;        /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">

This example is showing all borders in green color only.
</p>

This will produce following result:

This example is showing all borders in different colors.

This example is showing all borders in green color only.

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements