[rounded corners]- can someone explain how this works?

[LuckY07]

I don't understand how the following 'rounds' a box. I understand the idea
of using r1,r2,r3,r4 to make a corner, but i am not seeing how 'rtop' for example creates a right-top-corner.. r1 = 5px and as r2, r3 this gets progressively smaller, which would appear to be the BOTTOM-right, can someone explain how this creates the TOP-RIGHT corner?

heres how i am seeing the top-right corner mentally:
-----
---
--
-
-

XHTML >>
<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

CSS >>
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

btw, i got this code from:
http://www.myneatsite.com/articles/rounded-corners-box-css.php

[Declan1991]

You're thinking of it in reverse. It's more like
-----The b tags-----
etc.
where blue is the margin that gets progressively smaller as you move along.
Full example:
-----The b tags-----
----The b --tags----
---The b ----tags---
--The b ------tags--
-The b --------tags-

Notice the overflow is hidden, so that the margin (where the blue hyphens are), does not have the same background as the actual b tags (the red bit).

[LuckY07]

that makes a LOT of sense. My question now is with the margin:
lets look at 'r1':

r1{margin: 0 5px}

is top = 0 , and right = 5px?
how does 'r1' get centered above the 'container'\box?



-tks, i really appreciate the responses.

[Centauri]

margin: 0 5px means top & bottom zero, left & right 5px. As the <b> is set to block dispaly, it fills the available width, and the css sets the margin both sides.