NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>CSS1 Border Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
<!--
#outer {background-color: orange;
 border-style: solid;
 border-width: 5px;
 padding: 10px 10px;}
#one {background-color: yellow;
 border-style: double;
 border-width: medium;}
#two {background-color: yellow;
 border-style: double solid;
 border-color: red green purple blue;
 border-width: thin medium thick .25cm;}
-->
</style>

</head>
<body>

<div id="outer">
<p id="one">This is a paragraph of text that has a red double border around it. Notice how the text creeps up on the edges. Padding values will help you avoid this problem.</p>

<p id="two">This is another paragraph that has its borders set in a very bizarre way!</p>
Notice that the paragraph blocks can be within a large boxed block structure.
</div>

</body>
</html>
CLOSE WINDOW | VIEW RENDERED PAGE