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.
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.
No comments:
Post a Comment