=>CSS Border Properties:

  • The CSS border properties allow you to specify the style, width, and color of an element's border. 
1) Border Style:
  • The border-style property specifies what kind of border to display.
The following values are allowed:
  1. dotted - Defines a dotted border 
  2. dashed - Defines a dashed border 
  3. solid - Defines a solid border 
  4. double - Defines a double border 
  5. groove - Defines a 3D grooved border. The effect depends on the border-color value 
  6. ridge - Defines a 3D ridged border. The effect depends on the border-color value 
  7. inset - Defines a 3D inset border. The effect depends on the border-color value 
  8. outset - Defines a 3D outset border. The effect depends on the border-color value 
  9. none - Defines no border 
  10. hidden - Defines a hidden border
  • The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
2) Border Width:
  • The border-width property specifies the width of the four borders. 
  • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. 
  • The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
3) Border Color:
  • The border-color property is used to set the color of the four borders. 
  • The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
CSS Border - Individual Sides
  • In CSS, it is possible to specify a different border for each side. (top, right, bottom, and left):
Example :
p 
{ 
  border-top-style: dotted; 
  border-right-style: solid; 
  border-bottom-style: dotted; 
  border-left-style: solid; 
}
CSS Border - Shorthand Property:
  • As you can see from above, there are many properties to consider when dealing with borders. 
  • To shorten the code, it is also possible to specify all the individual border properties in one property. 
  • The border property is a shorthand property for the following individual border properties:
                                • border-width 
                                • border-style (required) 
                                • border-color

Example : 

p 
{ 
border: 5px solid red; 
}

Example :

<html>
<head>
<style type=”text/css”>
H1
{ Border-style:ridge;
Border-color:red;
}
P
{ Border-width:thick;
}
</style>
</head>
<body>
<h1> css </h1>
<p> cascading style sheet </p>
</body>
</html>