Round Corners Question

[Atomic]

Really just a general curious question with round corners.

I know there are various techniques to do this, but I want a cross-browser approach with four round corner images and for the round corner box to have a nice 1 or 2 px border around it with different color inside to that of the background. The best technique / generator I've seen is that of http://www.roundedcornr.com/ and its round border corner generator and was wondering why it can't go further than 600px high without the box breaking up?

Sample Css - looks to me an image is used to repeat vertically to give the border effect, but surely shouldn't breakup?:

.roundedcornr_box_810580 {
background: url(roundedcornr_810580_tl.png) no-repeat top left;
}
.roundedcornr_top_810580 {
background: url(roundedcornr_810580_tr.png) no-repeat top right;
}
.roundedcornr_bottom_810580 {
background: url(roundedcornr_810580_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_810580 div {
background: url(roundedcornr_810580_br.png) no-repeat bottom right;
}
.roundedcornr_content_810580 {
background: url(roundedcornr_810580_r.png) top right repeat-y;
}

.roundedcornr_top_810580 div,.roundedcornr_top_810580,
.roundedcornr_bottom_810580 div, .roundedcornr_bottom_810580 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_810580, .roundedcornr_bottom_810580 {
margin-top: -19px;
}
.roundedcornr_content_810580 { padding: 0 15px; }

------------------------------------------------------------------------

Sample HTML:

<div class="roundedcornr_box_810580">
<div class="roundedcornr_top_810580"><div></div></div>
<div class="roundedcornr_content_810580">
<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="roundedcornr_bottom_810580"><div></div></div>
</div>

 

[Tripnologist]

Look at your first 'tl' image and you will have your answer.

 

[Atomic]

Look at your first 'tl' image and you will have your answer.

whats the solution?

 

[Tripnologist]

It's a non repeating image so just make it longer.

 

[Atomic]

It's a non repeating image so just make it longer.

So I need to make all the top corner images to be longer in size?

I would have thought that it shouldn't matter as the 'r.png' css attributes have it as repeating so it should repeat vertically and not break apart after 600pixels

 

[Tripnologist]

Dude, you're making this more difficult than it needs to be.

Look at the image and then you'll understand why it's breaking (it's not technically breaking at all, the background image just ends before the content does). You simply need to make the image longer than any content you'd put in it.

http://www.roundedcornr.com/roundedcornr_810580_tl.png