|
|
| Cascading Style Sheets: Designing for the Web (2nd Edition) (ISBN: 0201596253) |
|
List Price: $39.99
Our Price: $27.99
Used Price: $9.79
Release Date: 13 July, 1999
Manufacturer: Addison-Wesley Pub Co (Paperback)
Sales Rank: 63,793
Author: Hakon Wium Lie, Bert Bos, Robert Cailliau
|
More Info
|
|
|
Alter Borders with CSS
|
2002-04-05 02:48:11
|
| |
html
|
|
|
|
|
Category: source:html:css
|
|
Description: Change the style of your html borders using Cascading Style Sheets.
|
|
Platform: IE
|
|
Author: detour
|
|
Viewed: 4049
|
|
Rating: 2.5/5 (13 votes)
|
|
|
| If you have any questions about
this piece of code or still need help, try posting your question on the forum. |
<!-- altbord.html written by detour@metalshell.com -->
<!-- Shows how to change the border styles using CSS -->
<!-- This method will only work with Internet Explorer. -->
<!-- http://www.metalshell.com -->
<html>
<head>
<title>CSS Alter Borders (IE Only)</title>
</head>
<style type="text/css">
.thickside {
border-left:4px solid;
border-right:4px solid;
color:#000;
}
.bordstyle {
border-style:solid groove double;
}
.bordstyle2 {
border-style:groove;
}
.bordcolor {
border:4px solid;
border-color:#ff0000 #00ff00 #0000ff #ff00ff;
}
.borddot {
border-style: dotted;
}
.borddash {
border-style: dashed;
}
.bordinset {
border-style: inset;
}
.bordoutset {
border-style: outset;
}
.bordridge {
border-style: ridge;
}
</style>
<body>
<table class="thickside">
<tr><td>Table with thick side borders</td></tr>
</table>
<br>
<table class="bordstyle">
<tr><td>Border with solid groove double style</td></tr>
</table>
<br>
<table class="bordstyle2">
<tr><td>Border with groove style</td></tr>
</table>
<br>
<table class="bordcolor">
<tr><td>Altered border colors</tr></td>
</table>
<br>
<table class="borddot">
<tr><td>Dotted border.</td></tr>
</table>
<br>
<table class="borddash">
<tr><td>Dashed border.</td></tr>
</table>
<!-- You can also do borders without the need for a table -->
<p class="bordinset">
Inset Border
</p>
<p class="bordoutset">
Outset Border
</p>
<p class="bordridge">
Ridge Border
</p>
</body>
</html>
|
|
|
