LuckY07 Posted December 17, 2007 Share Posted December 17, 2007 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 Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted December 18, 2007 Share Posted December 18, 2007 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. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted December 20, 2007 Share Posted December 20, 2007 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. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted December 20, 2007 Share Posted December 20, 2007 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.