round corner question

[JPW]

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>

________________________________________________________________

So I'm just really curious from a coding perspective as to why or how it all goes wrong?

[6StringGeek]

I don't have the answer, but there is an alternative. You can do it all without images with css3...it's not official, but it is supported by the newer browsers (not ie...bu it's not a real browser LOL)...older one's would just show square corners. So if you're cool with your code not being 100% valid you could try that. Here's some examples:

http://www.css3.info/preview/rounded-border/

[Quidam]

Rounded borders in css3 is supported by FF3 and Safari.
Opera 9, IE and google chrome is still missing this support.

CSS3 sure is a more comfortable option, so it all depends on your targeted viewers.