The border-width property (CSS Reference)
Introduction
This property can be used to define the width of the border.
To give all 4 borders different size you have two possibilities: The first one
is to declare the width in one definition separated with a space – something like
this:
border-width:10px 20px 30px 40px;
If you use it this way, then you have to follow some rules:
|
Amount of width
parameters:
|
Description:
|
|
1 width parameter
(border-width:10px)
|
If you use only one parameter, then it will be used for
all four borders.
|
|
2 width parameter
(border-width:10px 20px)
|
The first parameter will be used for the top and bottom
border and the second one for the left and right border.
|
|
3 width parameters
(border-width:10px 20px 30px)
|
The first parameter will be used for the top, the second
for left and right, and the third for the bottom border.
|
|
4 width parameters
(border-width:10px 20px 30px 40px)
|
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 width with the
sub-properties of border-width:
|
Sub-Property:
|
Description:
|
|
border-top-width
|
Defines the width for the top border.
|
|
border-left- width
|
Defines the width for the left border.
|
|
border-right- width
|
Defines the width for the right border.
|
|
border-bottom- width
|
Defines the width 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-width
Demonstration</title>
<style type="text/css">
p.border
{
border-left-width:10px;
border-left-color:blue;
border-left-style:solid;
border-right-width:20px;
border-right-color:green;
border-right-style:solid;
border-top-width:30px;
border-top-color:red;
border-top-style:solid;
border-bottom-width:40px;
border-bottom-color:black;
border-bottom-style:solid;
}
</style>
</head>
<body>
<h1><p class="border">The width of all
borders should be different.</p></h1>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
length
|
The following values can be also used to define the border
width:
cm (centimeter)
em (ems)
inch (inches)
mm (millimeters)
pc (picas)
px (pixels)
pt (points)
|
|
medium
|
This value creates a border with a medium width.
|
|
thick
|
This value creates a thick border.
|
|
thin
|
This value creates a border with a thin width.
|
|
Email TopXML