How to set CSS (cascading style sheet ) border properties?

CSS borders

The borders play an important role in the development of web page. The border properties specifies how the border you have applied should look like. There are three major properties of border as given below:

  • border-color
  • border-width
  • border-style

Setting CSS border-color property

The CSS border colors property allow you to set the border color as a whole or to set its left side color, right side color, top color or bottom color as per your requirement.

  1. border-top-color: Set the color of top side of border.
  2. border-bottom-color: Set the color of bottom side of border.
  3. border-left-color: Set the color of left side of border.
  4. border-right-color: Set the color of right side of border.
<html>
   <head>
      <style>
         p.para1 {
	    border:3px solid;
	    width:30%;
            border-bottom-color:red;
            border-top-color:green;   
            border-left-color:pink;  
            border-right-color:blue;  
	    } 
         p.para2 {
            border:3px solid;
	    width:30%;
            border-color:gold;        
            }
      </style>
   </head>
<body>
      <p class = "para1">
      First paragraph has been shown with border having different colours.
      </p>
      <p class = "para2">
      Second paragraph has been shown with border having golden colour.
      </p>
</body>
</html> 

Go through the result and try to understand the code:

Setting CSS border-color, www.programmingtutorial.in

The first paragraph has been targeted with the help of class namely para1 and second paragraph has been targeted with class para2.

Setting CSS border-width property

The CSS border width property allow you to set the border width as a whole or to set its left side width, right side width, top width or bottom width as per your requirement. The value of border width can be a length in pixel (px), pt or in cm. It can also be set as thin, medium or thick.

  1. border-top-width: Set the width of top side of border.
  2. border-bottom-width: Set the width of bottom side of border.
  3. border-left-width: Set the width of left side of border.
  4. border-right-width: Set the width of right side of border.

Let us now try to understand these properties with the help of code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       width:25%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       width:25%;
       }
   p#p3{
       border-width:thin; 
       border-style:solid;
       border-color:blue;
       width:25%;
       }
   p#p4{
       border-width:medium; 
       border-style:solid;
       border-color:golden;
       width:25%;
       }
   p#p5{
       border-width:thick; 
       border-style:solid;
       border-color:orange;
       width:25%;
       }
   p#p6{
       border-bottom-width:4px;
       border-top-width:15px;
       border-left-width: 3px;
       border-right-width:20px;
       border-style:solid;
       border-color:pink;
       width:25%;
       }
   </style>
   </head>
   
   <body>
      <p ID ="p1">
         Example of solid border whose width is 3px.
      </p>
      <p ID ="p2">
         Example of solid border whose width is 5pt.
      </p>
      <p ID ="p3">
         Example of solid border whose width is thin.
      </p>
      <p ID ="p4">
         Example of solid border whose width is medium;
      </p>
      <p ID ="p5">
         Example of solid border whose width is thick.
      </p>
      <p ID ="p6">
         Example of border with four different width.
      </p>
      </body>
</html>      
Setting CSS border width, www.programmingtutorial.in

In above code, each paragraph is defined with its own ID and CSS is applied to each ID.

Setting CSS border-style property

The CSS border style property allow you to set the border style as a whole or to set its left side style, right side style, top style or bottom style as per your requirement.

  1. border-top-style: Set the style of top side of border.
  2. border-bottom-style: Set the style of bottom side of border.
  3. border-left-style: Set the style of left side of border.
  4. border-right-style: Set the style of right side of border.

There are different styles which border property allows you to set in your code as per your requirement.

  1. none: It applies no border.
  2. solid: It applies solid line border.
  3. dotted: It applies dotted line border.
  4. double: It applies two solid lines border.
  5. groove: It applies carved line border.
  6. dashed: It applies dashed line border.
  7. hidden: It applies hidden line border.
  8. ridge: It applies a border opposite to groove.
  9. inset: It applies border as it is engraving.
  10. outset: It applies border as coming out of the page.

Let us now understand the style of border by using a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:none;
       border-color:red;
       width:25%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       width:25%;
       }
   p#p3{
       border-width:thin; 
       border-style:dotted;
       border-color:blue;
       width:25%;
       }
   p#p4{
       border-width:medium; 
       border-style:double;
       border-color:golden;
       width:25%;
       }
   p#p5{
       border-width:thick; 
       border-style:groove;
       border-color:orange;
       width:25%;
       }
    p#p6{
       border-width:thick; 
       border-style:dashed;
       border-color:blue;
       width:25%;
       }
    p#p7{
       border-width:thick; 
       border-style:hidden;
       border-color:magenta;
       width:25%;
       }
    p#p8{
       border-width:medium; 
       border-style:ridge;
       border-color:green;
       width:25%;
       }
    p#p9{
       border-width:thin; 
       border-style:inset;
       border-color:grey;
       width:25%;
       }
    p#p10{
       border-width:thin; 
       border-style:outset;
       border-color:red;
       width:25%;
       }   
   p#p11{
       border-bottom-width:4px;
       border-top-style:dotted;
       border-left-style: dashed;
       border-right-style:double;
       border-bottom-style:groove;
       border-color:pink;
       width:25%;
       }
   </style>
   </head>
   
   <body>
      <p ID ="p1">
         Example of  border whose style is none.
      </p>
      <p ID ="p2">
         Example of  border whose style is solid.
      </p>
      <p ID ="p3">
         Example of  border whose style is dotted.
      </p>
      <p ID ="p4">
         Example of  border whose style is double.
      </p>
      <p ID ="p5">
         Example of  border whose style is groove.
      </p>
      <p ID ="p6">
         Example of  border whose style is dashed.
      </p>
      <p ID ="p7">
         Example of  border whose style is hidden.
      <p ID ="p8">
         Example of  border whose style is ridge.
      </p>
      <p ID ="p9">
         Example of  border whose style is inset.
      </p>
      <p ID ="p10">
         Example of  border whose style is outset.
      </p>
      <p ID ="p11">
         Example of border with four different styles.
      </p>
   </body>
</html>    
Setting CSS border style property, www.programmingtutorial.in

To run the code, just copy code and paste it in notepad and then open with browser.