CSS Border Properties

The border are defined under the box properties category.

CSS supports the following border properties:

1. Border-style

The values for border-style properties are:
  • solid
  • Double
  • Groove
  • dotted
  • dashed
  • inset
  • outset
  • ridge
  • hidden

2. Border-width

This property specifies the width of the four borders.
The values for border-width property are:
  • thick
  • thin
  • medium
  • or the give specific size in px, pt, cm, em, etc.
Note: The border-style property must be defined to get the result of border-width.

3. Border-color

This property sets the color for the borders.
Border colors are set by:
  • Specifying a color name, like “orange”.
  • Specifying hex value, like “#ff0000”.
  • Specifying RGB value, like “rgb(255,0,0)”.

4. Border-direction

  • If you want an individual look for each side of the border, this property can be used.
  • The border direction values are: top/ bottom/ right/ left
Example:
  • border-bottom-style: solid;
  • border-bottom-color: red;
  • border-bottom-width: 5 px;
border-All in one
It is used to create a uniform border.

Example:
  • border:  10px outset green;
  • border: 20px solid;

Example: Demonstration of border properties

<html>
     <head>
          <title>Extenal style sheet</title>
          <style type="text/css">
               .bd {
                    border-width: 5px;
                    border-style: solid;
                    border-color:red;
                    width: 500px;
               }
               .bd1{
                    border-width: thick;
                    border-style: dotted solid groove double;
                    border-color: green;
                    width:620px;
               }
               .bd2{
                    border-width:7px;
                    border-top-style:double;
                    border-right-style:dotted;
                    border-left-style: double;
                    border-bottom-style: groove;
                    border-top-color: red;
                    border-right-color: blue;
                    border-left-color: green;
                    border-bottom-color:yellow;
                    width: 620px;
               }
               .bd3{ border: 10px outset maroon;width:400px;}
          </style>
     </head>
     <body>
          <p> <h2>The Example of border property</h2></p>
          <p class="bd"> You can give any style of border like solid, groove etc</p>
          <p class="bd1"> Here you can apply different border style for each direction</p>
          <p class="bd2">This is the another way to define different border style and color</p>
          <p class="bd3">This is the way to define border property in single line</p>
     </body>
</html>


Output:
border property
▲