CSS Border Properties

« Previous

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