Check http://www.w3schools.com/css/css_border.asp
You can do borders for each side individually, and have various styles to pick from. In your example, the border is created by this CSS code:
#sidebar {style.css (line 118)
border-color:#000000 #000000 #000000 #C0C0C0;
border-style:solid solid solid dotted;
border-width:0 0 0 2px;
Sorry if I sound dumb, I tried placing the code in the side-right and side-left spots and I end up with a skewed page instead with no border except a few dots. I was wondering where I would place the code in a css portion like so:
/* SIDEBARS */
#sidebar-left {
width: 200px;
padding: 10px 0 0 0;
float: left;
font-size: 11px;
overflow: hidden;
}
#sidebar-right {
width: 200px;
padding: 5px 0 0 0;
float: left;
font-size: 11px;
overflow: hidden;
}
.sidebar h2, .sidebar h2 a {
color: #999;
font-family: 'Georgia', serif;
font-weight: normal;
font-size: 18px;
text-transform: lowercase;
letter-spacing: -1px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar ul li {
margin: 0 0 10px 10px;
padding: 0;
}
.sidebar ul li ul li {
margin: 0 0 0 10px;
padding: 0;
}
.sidebar ul li ul li a {
display: block;
color: #333;
text-decoration: none;
border-bottom: 1px dotted #777;
}
.sidebar ul li ul li a:hover {
color: #333;
background: #ddd;
border-bottom: 1px solid #777;
}
Try
#sidebar-left {border-right:1px dotted #000;}
#sidebar-right {border-left:1px dotted #000;}
Thanks for the reply, it works on the left column, but the right column is thrown to the left side (at the bottom), it happens all over the site, single post and main index.
i.e.
http://img176.imageshack.us/img176/8100/bordercolkv2.png
The code I put in was this.
For my right-side bar:
<div id="sidebar-right" class="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar') ) : ?>
<li>
<?php get_calendar(); ?>
</li>
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
<?php wp_list_bookmarks(); ?>
<?php endif; ?>
</ul>
</div>
For CSS
#sidebar-left {
width: 200px;
padding: 10px 0 0 0;
float: left;
font-size: 11px;
overflow: hidden;
border-right:1px dotted #000;
}
#sidebar-right {
width: 200px;
padding: 5px 0 0 0;
float: left;
font-size: 11px;
overflow: hidden;
border-left:1px dotted #000;
}
Change the width of the right sidebar from 200px to 198px (or the width of your content-div).