Title: Create single-sided border for columns?
Last modified: August 19, 2016

---

# Create single-sided border for columns?

 *  [phillyzero](https://wordpress.org/support/users/phillyzero/)
 * (@phillyzero)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/create-single-sided-border-for-columns/)
 * I’m using a given theme template (comicpress 3vc), it’s a 3 column template with
   main index, and side-left/right.php.
 * So I was wondering how do I go about making the settings for the right/left side
   so that a one-sided border is created. For example, the right column, can I create
   a border that only appears on the left side (and not top/bottom/right) so that
   it separates the column from the center of the page (and vice versa with the 
   left column).
    i.e. [http://cowshell.com/cowandbuffalo/](http://cowshell.com/cowandbuffalo/)
   ^this is only 2 columns (I think) but the right column has the dotted border 
   which I’m interested in.

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [langsuyar](https://wordpress.org/support/users/langsuyar/)
 * (@langsuyar)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/create-single-sided-border-for-columns/#post-847321)
 * Check [http://www.w3schools.com/css/css_border.asp](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;
       ```
   
 *  Thread Starter [phillyzero](https://wordpress.org/support/users/phillyzero/)
 * (@phillyzero)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/create-single-sided-border-for-columns/#post-847334)
 * 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;
       					}
       ```
   
 *  [Evita](https://wordpress.org/support/users/evita/)
 * (@evita)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/create-single-sided-border-for-columns/#post-847401)
 * Try
    #sidebar-left {border-right:1px dotted #000;} #sidebar-right {border-left:
   1px dotted #000;}
 *  Thread Starter [phillyzero](https://wordpress.org/support/users/phillyzero/)
 * (@phillyzero)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/create-single-sided-border-for-columns/#post-847418)
 * 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](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;
       	}
       ```
   
 *  [Evita](https://wordpress.org/support/users/evita/)
 * (@evita)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/create-single-sided-border-for-columns/#post-847488)
 * Change the width of the right sidebar from 200px to 198px (or the width of your
   content-div).

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Create single-sided border for columns?’ is closed to new replies.

## Tags

 * [border](https://wordpress.org/support/topic-tag/border/)
 * [column](https://wordpress.org/support/topic-tag/column/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 3 participants
 * Last reply from: [Evita](https://wordpress.org/support/users/evita/)
 * Last activity: [17 years, 8 months ago](https://wordpress.org/support/topic/create-single-sided-border-for-columns/#post-847488)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics