The border-style property (CSS Reference)
Introduction
This property can be used to define the style of the border.
To give all 4 borders different style you have two possibilities: The first one
is to declare the style in one definition separated with a space – something
like this:
border-style:dotted solid dashed double;
If you use it this way, then you have to follow some rules:
|
Amount of styles:
|
Description:
|
|
1 style
(border-style:dotted)
|
Specifying one style allows you to apply it to all four
borders.
|
|
2 styles
(border-style:dotted solid)
|
The first style will be used for the top and bottom border
and the second one for the left and right border.
|
|
3 styles
(border-styles:dotted solid dashed)
|
The first style will be used for the top, the second for
left and right, and the third for the bottom border.
|
|
4 styles
(border-style:dotted solid dashed double)
|
The first one will be used for the top, the second one for
right, the third one for bottom, and the fourth for the left border.
|
The second option is to define the styles with the
sub-properties of border-style:
|
Sub-Property:
|
Description:
|
|
border-top-style
|
Defines the style for the top border.
|
|
border-left- style
|
Defines the style for the left border.
|
|
border-right- style
|
Defines the style for the right border.
|
|
border-bottom- style
|
Defines the style for the bottom border.
|
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>border-style Demonstration</title>
<style type="text/css">
p.border
{
border-left-width:3px;
border-left-color:black;
border-left-style:dotted;
border-right-width:10px;
border-right-color:red;
border-right-style:solid;
border-top-width:3px;
border-top-color:Blue;
border-top-style:dashed;
border-bottom-width:3px;
border-bottom-color:green;
border-bottom-style:double;
}
</style>
</head>
<body>
<h1><p class="border">All borders
should have a different style.</p></h1>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
dashed
|
A dashed border will be used.
|
|
dotted
|
A dotted border will be used.
|
|
double
|
A double solid border will be used.
|
|
groove
|
A 3D grove effect appears on the border.
|
|
hidden
|
No border or a hidden border.
|
|
inset
|
A 3D inset effect appears on the border.
|
|
none
|
No border will be shown.
|
|
outset
|
A 3D outset effect appears on the border.
|
|
ridge
|
A 3D ridge effect appears on the border.
|
|
solid
|
A solid border will be used.
|
|
Email TopXML