Rounded corners with border radius with 1px border

HTML & CSS
1

hey, i used the css3 border-radius to round the corners, then I put an additional 1px border but the 1px does not round it stays square while the background of the div still rounds, what am I missing?


#pcMainArea {
			width: 980px;
			margin-left: auto;
			margin-right: auto;
			padding: 0;
			border-collapse: collapse;
                        background-color:#FFFFFF;
                        border:1px solid #CCCCCC;

                       /* CSS 3 Stylings */

	                -moz-border-radius: 5px;
                        -webkit-border-radius: 5px;
                        -khtml-border-radius: 5px;
                        border-radius: 5px;
		}
2

Works OK in Firefox. What browser are you viewing this in?

3

FF3.6 and Chrome9… the 1px border stays square in FF while the inner part rounds and in Chrome it’s half around and half 1px border sticking out.

4

Weird, I don’t get that in FF or Chrome (on the Mac).

5

that’s weird it does work in test html but not on real site

6

Sounds like a conflict of some kind. Are you able to post a link?