border-bottom: ***;
| Browser |
|
|---|
The border-bottom property is a shorthand property for setting all the bottom border properties.
The underline style of the link can be changed by applying this property for the A element.
When this style is set, the default underline must be removed.
(removes the links underline)
a {
text-decoration: none;
border-bottom: 1px #0000a0 dotted;
}
| Property | Value | Explanation |
|---|---|---|
| border-bottom | each value | the bottom border |
Example
<html>
<head>
<title>TAG index</title>
<style type="text/css">
a { text-decoration: none; }
#example1 { border-bottom: 2px #0000ff dotted; }
#example2 { border-bottom: 3px #ff0000 double; }
#example3 { border-bottom: 1px #0000ff dashed; }
</style>
</head>
<body>
<p><a href="index.html" id="example1">Link Styles</a></p>
<p><a href="index.html" id="example2">Link Styles</a></p>
<p><a href="index.html" id="example3">Link Styles</a></p>
</body>
</html>
- Output
<html>
<head>
<title>TAG index</title>
<style type="text/css">
a {
text-decoration: none;
border-bottom: 1px dashed;
}
a:link { color: #0000ff; }
a:visited { color: #0000a0; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }
</style>
</head>
<body>
<p><a href="index.html">Link Styles</a></p>
</body>
</html>
- Output