In my categories widget I have main categories and sub-categories which are indented by a few px.

The whole widget area is boxed with a border.

I want to add a bottom border (a light dotted line) so that the different categories are more clearly defined. I have added the following code to the "Add HTML/CSS Inserts" section -

 div.widget ul li {border-bottom:1px dotted #DEEDEF;
		}

The only problem is that these bottom borders are also indented, see image below (I have changed the lines to red here to make it clearer what I am talking about)

I actually want them to stretch from the left border to the right, can someone please advise how I achieve this, without affecting the indentation of the text?
Also is it possible not to have the double lines where sub-categories end and a new category starts?

Thanks
Gill

Thanks for the reply - I will checkout your answers. Sorry I omitted the URL to the development site, here it is

Gill

Border width is really border thickness. This was kind of a fun exercise. Try this with the appropriate colors.

div.widget ul li ul li {
border-bottom:1px solid black !important;
margin-left:-10px !important;
padding-left:20px !important;
}