ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

15-CSS Border Color Property

The CSS Border Color Property gives the privilege  to change the color of any border surrounding a given set of elements. A user  can individually change the color of  any (bottom, left, top and right) sides of an element’s border using the following  properties −

  • border-bottom-color to change the color of the bottom border.
  • border-top-color to change the color of the top border.
  • border-left-color to  change the color of left border.
  • border-right-color to  change the color of the right border.

 

  1. <html>
  2.     <head>
  3.        
  4.         <style type="text/css">
  5.             p.select1{
  6.             border:1px solid;
  7.             border-bottom-color:yellow
  8.             border-top-color:orange    
  9.             border-left-color:blue  
  10.             border-right-color:black  
  11.              }
  12.              p.select2{
  13.                 border:2px solid;
  14.                 border-color:pink;      
  15.              }
  16.           </style>
  17.          
  18.        </head>
  19.        <body>
  20.        
  21.           <p class="select1">
  22.           This  is showing all borders in different and unique colors.
  23.           </p>
  24.          
  25.           <p class="select2">
  26.           This  is showing all borders in pink color only!!
  27.           </p>
  28.          
  29.     </body>
  30. </html>

This is another creative use of CSS border properties like dashed, groove, outset etc

Here I have provided you with another set of example to demonstrate it more clearly.

  1. <html>
  2.    <head>
  3.    </head>
  4.    
  5.    <body>.
  6.       <p style="border-width:6px; border-style:none;">
  7.        A border with no width.
  8.       </p>
  9.      
  10.       <p style="border-width:6px; border-style:solid;">
  11.        a solid border.
  12.       </p>
  13.      
  14.       <p style="border-width:6px; border-style:dashed;">
  15.        a dahsed border.
  16.       </p>
  17.      
  18.       <p style="border-width:6px; border-style:double;">
  19.        a double border.
  20.       </p>
  21.      
  22.       <p style="border-width:6px; border-style:groove;">
  23.       a groove border.
  24.       </p>
  25.      
  26.       <p style="border-width:6px; border-style:ridge">
  27.        A ridge  border.
  28.       </p>
  29.      
  30.       <p style="border-width:6px; border-style:inset;">
  31.        a inset border.
  32.       </p>
  33.      
  34.       <p style="border-width:6px; border-style:outset;">
  35.        an outset border.
  36.       </p>
  37.      
  38.       <p style="border-width:6px; border-style:hidden;">
  39.        a hidden border.
  40.       </p>
  41.      
  42.       <p style="border-width:6px;border-top-style:solid;
  43.      border-bottom-style:dashed; border-left-style:groove; border-right-style:double;">
  44.       This is  a border with four different styles.
  45.       </p>
  46.    </body>
  47.    
  48. </html>
Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!