Monday, 16 December 2013

CSS » Border

In CSS border can be added with border property.
Border property have 20 different properties.


border
Sets all the border properties in one declaration
border-bottom
Sets all the bottom border properties in one declaration
border-bottom-color
Sets the color of the bottom border
border-bottom-style
Sets the style of the bottom border
border-bottom-width
Sets the width of the bottom border
border-color
Sets the color of the four borders
border-left
Sets all the left border properties in one declaration
border-left-color
Sets the color of the left border
border-left-style
Sets the style of the left border
border-left-width
Sets the width of the left border
border-right
Sets all the right border properties in one declaration
border-right-color
Sets the color of the right border
border-right-style
Sets the style of the right border
border-right-width
Sets the width of the right border
border-style
Sets the style of the four borders
border-top
Sets all the top border properties in one declaration
border-top-color
Sets the color of the top border
border-top-style
Sets the style of the top border
border-top-width
Sets the width of the top border
border-width
Sets the width of the four borders


border-style property

» EXAMPLE:

<html>
<head>
<style>
#a {border-style:none;}
#b {border-style:double;}
#c {border-style:dashed;}
#d {border-style:solid;}
#e {border-style:dotted;}
#f {border-style:ridge;}
#g {border-style:groove;}
#h {border-style:outset;}
#i {border-style:inset;}
#j {border-style:hidden;}
</style>
</head>
<body>
<p id="a">Without Border</p>
<p id="b">With double border.</p>
<p id="c">With dashed border.</p>
<p id="d">With solid border.</p>
<p id="e">With dotted border.</p>
<p id="f">With ridge border.</p>
<p id="g">With groove border.</p>
<p id="h">With outset border.</p>
<p id="i">With inset border.</p>
<p id="j">With hidden border.</p>
</body>
</html>


» Result:


Without Border


With double border.


With dashed border.


With solid border.


With dotted border.


With ridge border.


With groove border.


With outset border.


With inset border.


With hidden border.





Border Width
Border width is defined with border-width property.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

» EXAMPLE:

<html>
<head>
<style>
#c {
border-style:solid;
border-width: 6px;
}
#d {
border-style:solid;
border-width:medium;
}
</style>
</head>
<body>
<p id="c">Solid border with 6px width.</p>
<p id="d">Solid border with 6px width.</p>
</body>
</html>


» Result:


Solid border with 6px width.


Solid border with 6px width.



Border Color

» EXAMPLE:


<html>

<head>
<style>
#c {
border-style:solid;
border-color: blue;
}
</style>
</head>
<body>
<p id="c">Solid border with blue color.</p>
</body>
</html>


» Result:


Solid border with blue color.





Individual sides
In the next example we will use:


  • border-top-style
  • border-bottom-style
  • border-right-style
  • border-left-style

» EXAMPLE:

<html>
<head>
<style>
#c {
border-top-style:dotted;
border-bottom-style:dashed;
border-right-style:double;
border-left-style:double;
}
</style>
</head>
<body>
<p id="c">Solid border with blue color.</p>
</body>
</html>


» Result:



Solid border with blue color.





You can also set border with a single property.

» EXAMPLE:


<html>

<head>
<style>
#c {
border-style:dotted double;
}
</style>
</head>
<body>
<p id="c">Dotted .</p>
</body>
</html>


» Result:



Solid border with blue color.





The border-style property can have from one to four values.
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted



Shorthand property


The border property is a shorthand for the following individual border properties:
  • border-width
  • border-style (required)
  • border-color

» EXAMPLE:



<html>

<head>

<style>

#c {

border: 2px blue dotted;
}
</style>
</head>
<body>
<p id="c">Dotted border with blue color and 2px width.</p>
</body>
</html>


» Result:


Dotted border with blue color and 2px width.