How to make a small border-bottom?

[d.crysty23]

How do I make the border-bottom to have a smaller size? If you notice in the link below, in the product list there is a vertical line on the right which separates the title and the description from the price and the "add to cart" button. I want something like that in the bottom part as well.. I've managed to put a border but it's from one side to the other, and I don't want that.

 

http://www.3bwine.com/CRISTY/prestashop/index.php?id_category=6&controller=category

[vekia]

 

 

How do I make the border-bottom to have a smaller size? 

about what "border bottom" you're talking? can you show it on screen, i have no idea

[d.crysty23]

 I`m talking about this border. I've posted a screenshot below of how I want it to look like.

[vekia]

product-list.css line 4 change:

#product_list li {
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

to:

#product_list li {
margin-bottom: 14px;
padding: 12px 8px;
border-bottom: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

and:

ul#product_list {
list-style-type: none;
} 

to:

ul#product_list {
list-style-type: none;
border: 1px solid #eee;
margin-left: 10px;
}

[d.crysty23]

 Yes, it looks good, but that's how I've done it as well. I want the bottom border to not be from one side to the other, to be a space there. I've attached a picture to understand better.. besides, the last product in the bottom looks pretty bad

 

 

[vekia]

ohhh you're right it's not the same as on image you attached before

 

in your product_list.tpl add </div><div class="mythinline"></div> like i show below:

add it right after <div class="right_block"></div>

<li class="ajax_block_product  alternate_item clearfix">
			<div class="left_block">
							</div>
			<div class="center_block">
				    <a href="http://www.3bwine.com/CRISTY/prestashop/index.php?id_product=4&controller=product" class="product_img_link" title="BARBERA d`ASTI SUPERIORE "IOLANDAI"">
					<img src="http://www.3bwine.com/CRISTY/prestashop/img/p/3/4/34-home_default.jpg" alt="BARBERA d`ASTI SUPERIORE "IOLANDAI"" title="BARBERA d`ASTI SUPERIORE "IOLANDAI"" width="90" height="239">
					<!--<span class="new">New</span>-->
				</a>
				<h3><a href="http://www.3bwine.com/CRISTY/prestashop/index.php?id_product=4&controller=product" title="BARBERA d`ASTI SUPERIORE "IOLANDAI"">BARBERA d`ASTI SUPERIORE "IOLANDAI"</a></h3>
				<p class="product_desc"><a href="http://www.3bwine.com/CRISTY/prestashop/index.php?id_product=4&controller=product" title="Temporibus autem quibusdam et aut officiis debitis                                aut rerum necessitatibus saepe eveniet ut                                                     repudiandae sint et molestiae">Temporibus autem quibusdam et aut officiis debitis                                aut rerum necessitatibus saepe eveniet ut                                                     repudiandae sint et molestiae</a></p>
			</div>
			<div class="right_block">
												<div class="content_price">
					<span class="price" style="display: inline;">$25.21</span><br>					<span class="availability">Available</span>				</div>
																														<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_4" href="http://www.3bwine.com/CRISTY/prestashop/index.php?controller=cart&add=1&id_product=4&token=07e41ecd1ac5c3db65f61da01f826ee9" title="Add to cart"><span></span>Add to cart</a>
												
													<a class="button lnk_view" href="http://www.3bwine.com/CRISTY/prestashop/index.php?id_product=4&controller=product" title="View">View</a>
			</div><div class="mythinline"></div>
		</li>

in css styles use this:

#product_list .mythinline {
width: 95%;
height: 1px;
display: block;
border-bottom: 1px solid #c0c0c0;
margin: -20px auto;
position: relative;
bottom: 0px;
}

effect

[d.crysty23]

what you've said worked. Do you know how to remove the border from the first element? I've made a printscreen to understand better and I've also added what I had tried but didn't work.

#product_list .mythinline:first-child{border:none;}

[vekia]

instead of simple </div><div class="mythinline"></div> use this:

{if !$smarty.foreach.products.first}
</div><div class="mythinline"></div>
{/if}