Jump to content

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


LuckY07

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

 

background.jpg

 

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.