First look at the effect:
Effect chart
The following is the source code:
<title>test</title>
<style type= "Text/css" >
ul{
margin:0px;
padding:0px;
width:200px;
}
UL li{
Float:left;
List-style-type:none;
Border-top: #000 solid 1px;
Border-left: #000 solid 1px;
width:65px;
}
. border-r{
Border-right: #000 solid 1px;
}
. border-b{
Border-bottom: #000 solid 1px;
}
. border-l{
Border-right: #000 solid 1px;
Border-bottom: #000 solid 1px;
}
</style>
<body>
<ul>
<li> </li>
<li> </li>
<li class= "Border-r" > </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class= "Border-r" > </li>
</ul>
<ul>
<li> </li>
<li> </li>
<li class= "Border-r" > </li>
</ul>
<ul>
<li class= "Border-b" > </li>
<li class= "Border-b" > </li>
<li class= "Border-l" > </li>
</ul>
</body>
You can see the effect by saving the above code into an HTML-formatted Web page document.