Use nested border : border : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » border »

Use nested border


 

<!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>

<div>
<div>
<h1>Header</h1>
<hr>
<address>
A<br>
E-Mail: <a href="mailto:a@m.com">a@m.com</a><br>
Web Address: <a href="">http://www.m.com</a>
</address>
</div>
</div>
</body>
</html>