Google Chrome not displaying border

[p0is0n]

Hi all.

I am using CSS to define my page sections. I have a page section which contains a header, nav, main secion, sidebar, and footer.

The main section floats on the left and the sidebar floats on the right.
I want a 1px dotted black border down the right hand side of the main section.

In my CSS i use:
/* Main div. */
div.main
{
float: left;
width: 630px;
padding: 10px;
background: white;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: black;
}

The last three define the border.
The border displays correctly in IE, Firefox and Oprea, however the border does not display at all in Google Chrome.
If I change the border size to 2px or more the border displays, it just wont display with the size of 1px.

Any ideas on why this is?
I have searched and just cannot find anything on this.
The rest of the CSS file is copied below just in case anyone needs to see it.

Thanks!

/* Page div. */
div.page
{
width: 900px;
margin:0 auto;
background: white;
}

/* Header div. */
div.header
{
padding: 5px 10px;
background: white;
}

/* Top Nav div. */
div.topnav
{
padding: 5px 10px;
background: white;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
}

/* Main div. */
div.main
{
float: left;
width: 630px;
padding: 10px;
background: white;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: black;
}

/* Sidebar div. */
div.sidebar
{
float: right;
width: 220px;
padding: 10px;
background: white;
}

/* Footer div. */
div.footer
{
clear: both;
padding: 5px 10px;
background: white;
border-top: 1px dotted black;
}