<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
4 columns, all fluid</div>
<h1>leftcontent</h1>
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
<h1>centerleftcontent</h1>
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
<h1>centerrightcontent</h1>
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
<h1>rightcontent</h1>
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
Body border: 50px #666 ridge
<source lang="html4strict">
<!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></title>
<style type="text/css">
body {
margin: 0;
padding: 1.5em;
border: 50px #666 ridge;
}
</style>
</head>
<body>
H
N
V
Text Text
</body>
</html>
</source>
border: 40px double black; creates a black, 40-pixel, double-line border.
<source lang="html4strict">
<html>
<head>
<title></title>
<style type="text/css">
#navigation {
border: 40px double black;
}
</style>
</head>
<body>
</body>
</html>
</source>
Border cascade
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Property Inheritance </title>
<style type="text/css">
ul li {
border: thin solid black;
}
li#navigation {
border: thick solid black;
}
</style>
</head>
<body>
- This list item has a thin border around it.
- This list item has a thick border around it.
</body>
</html>
</source>
Border direction
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style>
h1 {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 25px;
border-right-color: #ffcc33;
border-top-color: #33ff33;
}
</style>
</head>
<body>
<h1>header 1
Do you now?
block quote.
Did you now?
</body>
</html>
</source>
border:none is the default.
<source lang="html4strict">
<!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></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
position: absolute;
background: yellow;
}
</style>
</head>
<body>
this is a test.
this is a test. this is a test. this is a test.
this is a test
</body>
</html>
</source>
border property, can be used to specify border-width, border-style, and border-color for all four sides at once.
<source lang="html4strict">
<!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" xml:lang="en">
<head>
<title>border</title>
<style rel="stylesheet" type="text/css">
div#shorthand {
border: 1px solid crimson;
padding: 5px;
}
</style>
</head>
<body>
</body>
</html>
</source>
border sets the size, pattern, and color of the border surrounding the padding.
<source lang="html4strict">
<!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></title>
<style type="text/css">
display: static;
overflow: visible;
visibility: visible;
width: 160px;
height: 150px;
padding: 30px;
border-top: 30px solid gray;
border-bottom: 30px solid black;
border-left: 30px solid gray;
border-right: 30px solid black;
margin-left: 230px;
margin-top: 80px;
background-color: #ccc;
}
</style>
</head>
<body>
Box Model
</body>
</html>
</source>
border shortcut property takes three space-delimited values that represent the border"s width, style, and color.
<source lang="html4strict">
<html>
<head>
<title></title>
<style type="text/css">
#navigation {
border: 40px double black;
}
</style>
</head>
<body>
</body>
</html>
</source>
Border shortcut setting
<source lang="html4strict">
<!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" xml:lang="en">
<head>
<title>
border-top, border-right, border-bottom, border-left, border
</title>
<style rel="stylesheet" type="text/css">
div {
margin: 5px;
float: left;
width: 56px;
height: 56px;
}
div#border {
border: 1px dashed darkkhaki;
}
</style>
</head>
<body>
</body>
</html>
</source>
Border"s width cannot be negative because they are inside the margin.
<source lang="html4strict">
<!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></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
position: absolute;
border: -10px dotted black;
background: yellow;
}
</style>
</head>
<body>
this is a test.
this is a test. this is a test. this is a test.
this is a test
</body>
</html>
</source>
border: thick solid black
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
</body>
</html>
</source>
Border with specific setting for four directions
<source lang="html4strict">
<!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" xml:lang="en">
<head>
<title>
border-top, border-right, border-bottom, border-left, border
</title>
<style rel="stylesheet" type="text/css">
div {
margin: 5px;
float: left;
width: 56px;
height: 56px;
}
div#properties {
border-top: 1px solid darkkhaki;
border-right: 1px dashed darkkhaki;
border-bottom: 1px solid darkkhaki;
border-left: 1px dashed darkkhaki;
background: lightyellow;
}
</style>
</head>
<body>
</body>
</html>
</source>
Combined style
<source lang="html4strict">
<?xml version = "1.0"?>
<!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>Borders</title>
<style type = "text/css">
div { text-align: center;
margin-bottom: 1em;
padding: .5em }
.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
.outset { border-style: outset }
.red { border-color: red }
.blue { border-color: blue }
</style>
</head>
<body>
this is a test.
this is a test.
this is a test.
this is a test.
this is a test.
</body>
</html>
</source>
Set border to "3px dotted #33333;"
<source lang="html4strict">
<!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></title>
<style type="text/css">
h2 {
border: 3px dotted #33333;
}
p {
margin: 0;
padding: 10px 0 0 0;
}
</style>
</head>
<body>
Designing Instant Gratification
This is a test.
</body>
</html>
</source>
This paragraph has a 1 pixel thick, solid black border around it.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
border: 1px solid black;
}
</style>
</head>
<body>
This is a test.
</body>
</html>
</source>
Use nested border
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Telling Real from Counterfeit</title>
<style type="text/css">
body {
margin: 3.5%;
color: #030;
background: #ffc;
font-family: Verdana, Arial, sans-serif;
font-size: 1.05em;
}
body div {
border-style: groove;
border-width: 8px;
border-color: green;
}
body div div {
margin: 0.25em;
padding: 0 1em 0.5em;
border-style: double;
border-width: 8px;
border-color: olive;
background: transparent;
}
h1 {
color: green;
background-color: #ffc;
font-family: Verdana, Arial, sans-serif;
font-size: 1.75em;
text-align: center;
border-top: 0;
}
h2 {
color: #606;
background: #ffc;
font-family: Arial, sans-serif;
}
address {
font-family: Garamond, serif;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
</source>