Applying a Border to a Single Side
Description
You can apply different borders to each side of an element using properties that are more specific.
-
border-top
border-top-width
border-top-style
border-top-color
Defines the top border.
Values are the same as for the generic properties. -
border-left
border-left-width
border-left-style
border-left-color
Defines the left border.
Values are the same as for the generic properties. -
border-right
border-right-width
border-right-style
border-right-color
Defines the right border.
Values are the same as for the generic properties. -
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
Defines the bottom border.
Values are the same as for the generic properties.
Example
The following code uses the Side-Specific Border Properties.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h2 {<!--from w w w .j a va 2 s . c o m-->
border-bottom-style: dashed;
}
p {
border-width: 5px;
border-style: solid;
border-color: black;
border-left-width: 10px;
border-left-style: dotted;
border-top-width: 10px;
border-top-style: dotted;
}
.myStyle {
border-bottom: 1px dotted black;
}
</style>
</head>
<body>
<h2>This is the title</h2>
<p>This is a test.</p>
<span class="myStyle">Under 5</span>
</body>
</html>