[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? tks

 

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

[sKunKbad]

This is a way to make rounded corners without images. Using images is more popular in my opinion, and makes the XHTML cleaner. All those divs just to make a round cornered box is a little extreme. I usually use 3 divs, one with a top of the box image, one with a background and the content, and one with the bottom of the box image.

 

<div id="boxtop">
     <img src="boxtop.gif" />
</div>
<div id="boxcontent">
     <p>This is the content of the box</p>
</div>
<div id="boxbottom">
     <img src="boxbottom.gif" />
</div>

 

I've tried numerous ways of making rounded corner boxes, and this one I like best.

[dbrimlow]

Ahh, the old classic css rounded corner trick. This is a great trick.

 

What the r1, r2, etc is doing is stacking lines of color on top of each other, each line is progressively shorter on the right and left. When finished, it gives the illusion of being rounded.

 

The rtop and rbottom do the stacking.

 

It is sort of like making square "leggo" blocks look round.

[dbrimlow]

Actually, I made a site a while ago using that technique with a small graphic background enhancement.

 

rounded corner technique

 

For the "header" I made a small graphic (2px wide by 60px high) the top half of it is the same color as the "rtop" background color, and the bottom half blends to black:

 

 

When tiled as a background image it gives the illusion of the graphic being an actual rounded corner (yet it is only 349 bytes total).

 

Here is the css:

#pageHeader {height:30px; line-height:50px; color: #fff; font-family:arial, Helvetica, sans-serif; font-size:24px; padding:10px 16px; background: #000000 url(../images/background.jpg) top repeat-x; border-bottom:3px solid #000000}

 

Then I just used this in my markup:

<div id="container">
<b class="rtop">
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b></b>
  <!-- end top rounded corner styles -->
  <div id="pageHeader">sitename.com</div> 

 

Fun technique.