Monday, May 15, 2017

CSS Borders


The border property specifies how the border of the box should look. 

Following three property of border:

1) The border-color
2) The border-style
3) The border-width

1) The border-color Property

It is the specified color of a border. We can also change color individual like the bottom, left, right, top sides of an HTML border using following property:

The border-bottom-color will changes the color of the bottom border.
The border-top-color will changes the color of the top border.
The border-left-color will changes the color of the left border.
The border-right-color will changes the color of the right border.

Example of border-color

<html>
<head>
<title>The border-color Example</title>
<style type="text/css">
         p.demo1{            
            border-bottom-color: red; /* Red color border */
            border-top-color: yellow;    /* Yellow color border */
            border-left-color: green;   /* Green color border */
            border-right-color: pink;  /* Pink color border */
border:1px solid;
         }
         p.demo2{
            border:1px solid;
            border-color: red;        /* All red color border */
         }
      </style>
</head>

<body>
<h1 class="demo1">This is the example of all different color border property</h1>
<h1 class="demo2">This is the example of all red color border property</h1>
</body>
</html>

2) The border-style Property

The border-style Property used to specify what kind of border to display,

Following are the border-style property:

double - Used to defines a double border
dotted - Used to defines a dotted border.
hidden - Used to defines a hidden border
dashed - Used to defines a dashed border
solid - Used to defines a solid border
outset - Used to defines a 3D outset border. The effect depends on the border-color value
groove - Used to defines a 3D grooved border. The effect depends on the border-color value
inset - Used to defines a 3D inset border. The effect depends on the border-color value
ridge - Used to defines a 3D ridged border. The effect depends on the border-color value
none - Used to defines no border

Example of border-style

<html>
   <head>
   <title>This is the example of The border-style Property</title>
   </head>
   
   <body>
   
      <h1 style="border-width:5px; border-style:dashed;">
      Example of dahsed border.
      </h1>
 
      <h1 style="border-width:5px; border-style:none;">
      Example of border with none width.
      </h1>
      
 <h1 style="border-width:5px; border-style:hidden;">
      Example of hidden border.
      </h1>
 
      <h1 style="border-width:5px; border-style:solid;">
      Example of solid border.
      </h1>
                 
      h1p style="border-width:5px; border-style:double;">
      Example of double border.
      </h1>
      
      <h1 style="border-width:5px; border-style:groove;">
      Example of groove border.
      </h1>
      
 <h1 style="border-width:5px; border-style:outset;">
      Example of outset border.
      </h1>
 
 <h1 style="border-width:5px;border-top-style:solid;
      border-bottom-style:dashed; border-left-style:groove; border-right-style:double;">
      Example of border with four different styles.
      </h1>
 
      <h1 style="border-width:5px; border-style:ridge">
      Example of aridge  border.
      </h1>
      
      <h1 style="border-style:inset; border-width:5px;">
      Example of inset border.
      </h1>                
   </body>
   
</html> 

3) The border-width Property

The border-width property specifies width of an HTML element borders. The possible value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick.

Following types of property for border-width:

border-bottom-width - Used to changes the width of the bottom border.
border-top-width - Used to changes the width of the top border.
border-left-width - Used to changes the width of the left border.
border-right-width - Used to changes the width of the right border.

Example of border-width

<html>
   <head>
   <title>Example of The border-width Property</title>
   </head>
   <body>
      <h1 style="border-width:medium; border-style:solid;">
      Example of a solid border whose width is medium;
      </h1>
      
 <h1 style="border-width:5pt; border-style:solid;">
      Example of a solid border whose width is 5pt.
      </h1>
 
 <h1 style="border-width:5px; border-style:solid;">
      Example of a solid border whose width is 5px.
      </h1>
 
      <h1 style="border-width:thick; border-style:solid;">
      Example of a solid border whose width is thick.
      </h1>
      
 <h1 style="border-bottom-width:3px;border-top-width:12px;
      border-left-width: 7px;border-right-width:12px;border-style:solid;">
      Example of a a border with four different width.
      </h1>
 
 <h1 style="border-width:thin; border-style:solid;">
      Example of a solid border whose width is thin.
      </h1>
   </body>
</html>

No comments:

Post a Comment