Problem in rounded corner border

[new_developer]

Hi everyone,

Please help me in rounded border corners. I have generated rounded corner borders from site and it give me five images (four corners and one dot image files). I have set all corners according to that site's description HTML and CSS code. But I can't set bottom right corner border.

Please check the HTML and CSS code below and figure out mistake. I will highly appreciate this.

Html code:

<div class="box-container">
	<div class="top"><div></div></div>
    
    	<div class="content">
        <p>
        	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
`		</p>
		</div>
    
	<div class="bottom"><div></div></div>    
</div>

CSS code:

.box-container
{
	background:url(tl.png) top left no-repeat;
	width:600px;
	height:auto;
	margin:auto;
}

.top
{
	background:url(tr.png) top right no-repeat;
}

.bottom
{
	background:url(bl.png) bottom left no-repeat;
}

.bootom div
{
	background:url(br.png) bottom right no-repeat;
}

.content
{
	background:url(dot.png) top right repeat-y;
}

.top div, .top, .bottom div, .bottom
{
	width:100%;
	height:15px;
	font-size:1px;
}


.content, .bottom
{
	margin-top:-19px;
}


.content
{
	padding:0px 15px;
}

I have check websites which generate rounded corners and I followed as they described. But still border corners are not placing perfect. Plz anyone help.

[luweegee]

try this!

.box-container
{
        border: 1px solid black;
        border-radius: 10px; 
	background:url(tl.png) top left no-repeat;
	width:600px;
	height:auto;
	margin:auto;
}

i used border 1px to see the rounded corner of the side...and for the round corner use border-radius...

[new_developer]

try this!

.box-container
{
        border: 1px solid black;
        border-radius: 10px; 
	background:url(tl.png) top left no-repeat;
	width:600px;
	height:auto;
	margin:auto;
}

i used border 1px to see the rounded corner of the side...and for the round corner use border-radius...

But "border radius" is CSS3 property, I want a solution earlier versions of CSS.

[luweegee]

if you are having a problem in other browser...u can try this for mozilla -moz-border-radius: 10px; and -webkit-border-radius: 10px; this is the easiest way...