Description:-
Border
You can set the color, style and width of the
borders around an element in one declaration by using the border
property.
Syntax:-
border:
1px solid #333333;
Border Color
You can set the color of a border independently with the border-color property.
border-color: value;
Border
Style
You can set the style of a border
independently with the border-style property.
border-style: value;
Values:
- dashed
- dotted
- double
- groove
- hidden
- inset
- none
- outset
- ridge
- solid
Border Width
You can set the width of a border independently with the border-width property.
border-width: value;
Border Bottom
You can set the color, style and width of the bottom border around an element in one declaration with the border-bottom property.
border-bottom: 1px solid #333333;
Border Left
You can set the color, style and width of the left border around an element with the border-left property.
border-left: 1px solid #333333;
Border Right
You can set the color, style and width of the right border around an element in one declaration with the border-right property.
border-right: 1px solid #333333;
Border Top
You can set the color, style and width of the top border around an element in one declaration with the border-top property.border-top: 1px solid #333333;
How to Create Vertical Menu in CSS Beautiful Menu in CSS
Set Differant types of Cursor in CSS Set Differant Cursor type as per sitution
Example:-
<html>
<head>
<style>
table { border-width: 7px 15px;
border-style: double; }
td { border-width: thick;
border-style: outset; }
b { border-width: 6px;
border-style: solid; }
p
{ border:
1px solid red; }
</style>
</head>
<body>
<p>CSS Borders</p>
<h2>CSS Borders</h2>
<b>This paragraph has a black border.</b><br><br>
<table>
<tr><td>This table
has an outset border</td></tr>
<tr><td>and each
cell has</td></tr>
<tr><td>a dotted
border.</td></tr>
</table>
</body>
</html>
<html>
<head>
<style>
.solid {border-style: solid double dashed dotted; }
.double {border-style: double;
}
.groove {border-style: groove;
}
.dotted {border-style: dotted;
}
.dashed {border-style: dashed;
}
.inset {border-style: inset; }
.outset {border-style: outset;
}
.ridge {border-style: ridge; }
.hidden {border-style: hidden;
}
</style>
</head>
<body>
<p Class='solid'>This
is a solid border</p>
<p Class='double'>This
is a double border</p>
<p Class='groove'>This
is a solid border</p>
<p Class='dotted'>This
is a double border</p>
<p Class='dashed'>This
is a solid border</p>
<p Class='inset'>This
is a double border</p>
<p Class='outset'>This
is a solid border</p>
<p Class='ridge'>This
is a double border</p>
<p Class='hidden'>This
is a solid border</p>
</body>
</html>
Border Color Example :
<html>
<head>
<style>
table { border-color: red green black;
border-style: dashed; }
p { border-color: blue;
border-style: solid; }
</style>
</head>
<body>
<h2>CSS Borders</h2>
<p>This paragraph has a blue border.</p>
<table>
<tr><td>This table
has an dashed border</td></tr>
</table>
</body>
</html>
0 comments:
Post a Comment