MODx Content Management System | Simple Rounded Corner CSS Boxes

Simple Rounded Corner CSS Boxes

Posted on 18-Jan-06 at 1:37 pm by Ryan Thrash

Part One: Historical Info, then the Goods

In November 2003, I invented an interesting CSS technique for semantic, rounded corner boxes using CSS. What that translates into non-geek-speak is that you get pretty boxes with no extra bulky XHTML markup. David Shea liked it and blogged it. Jeffrey Zeldman refused to publish an article because I had asked for some feedback from the folks on the CSS-Discuss list (from whence Dave got the blog reference) ... he considered it "already published". This was just as they were working on their earliest rounded corner box articles and before they were published. As I recall, even Eric Meyers commented on CSS-D that he liked it and might even use the technique ... the highest praise possible from an aspiring CSSer!

There were challenges though, as became quickly evident from the (even to this day) weekly inquiries from around the planet

It requires two images to come up with the appearance of one ... not instantly intuititive. Why not one for each corner, for example?
It used some pretty tricky CSS chock full of padding, negative margins and IE hacks-a-plenty. Even I have a tough time following and have to futz to get right when I deviate from the "recipe" ... probably not what you should call a "good sign".
My original demo images were only really meant for no more than a few hundred pixels wide. So I got lots of questions about huge gaps in the boxes when used full screen on an 2484x1652 resolution page (or maybe it was just 1024x768...).
Worse, I hadn't done much Photoshop teaching since doing the technical edit for Random House on The Official Guide for Adobe Photoshop 2.5 and visiting Kai Krause at the HSC offices in Santa Monica. Yes, version 2.5 ... and yes the guy of KPT filter fame.
Did I mention a lot of folks asked me how to make images?

(Speaking of HSC and Kai, anyone ever know what happened to Sydney Stein and the rest of the Live Picture product team? Shawn Steiner's at Autodesk (via Discreet's acquisition) now and I still keep up with him via Linked-In; Ben Weiss is still doing amazing stuff in the graphics world. And Kai Krause opened Byteburg, an R&D lab in a freaking castle in Germany!)

But I digress ... I devised the hypothesis that if I could do it with only one really big sample image and a max of five CSS rules for the basic structure, then I would be able to stop sending folks email along the lines of, "I'd really like to help out but I don't really do Photoshop tutorials and Google can probably help you figure it out... and yes I'm aware there's a massive gap on your monitor that's large enough to show two HD-res movies side-by-side".

Then I promptly did the one-image version of it (in early 2004, mind you), never finished documenting it, continued to get emails from folks asking when, and eventually started working on a little CMS project that's kept me pretty busy since then. This morning, I finally managed to get down to my five-rule goal! (Actually, I made the part up about the five-rule goal ... but it's pretty cool that much got cut out nonetheless! Jason Fried is right: sometime "less is more".)

Notwithstanding the meandering trivia above, today I finally present the long-promised update to the original "ThrashBox" technique, with a more semantic name: Simple Rounded Corner CSS Boxes. Give "credit" (ahem) to "Big John" Gallant for the original name, as he insisted it be "ThrashBox". Since he is the man when it comes to figuring out sticky CSS situations, and helped work around some tricky IE shenanigans in the original, I reluctanly acquiesced. I promise to be stronger next time! :p

For those of you that haven't seen it, you can make boxes that look like the following (or better/worse) with this technique. The neat thing is that they expand and shrink automatically to fit your content and the XHTML markup is really light:
Sample Simple Rounded Corner CSS box

So let's just start right in... Imagine, if you will, the following markup:


<div class="cssbox">
    <div class="cssbox_head"><h2>This is a header</h2></div>
    <div class="cssbox_body">
        <p>This is for your content.</p>
    </div>
</div>

Now, for the CSS ... much more svelt and the bare minimum of hacks in hopes it pleases the anathema that is the future IE7:

/* set the image to use and establish the lower-right position */ 
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
    background: transparent url(YourImageHere.png) no-repeat bottom right; 
} 
.cssbox { 
    width: 335px !important; /* intended total box width - padding-right(next) */
    width: 320px; /* IE Win = width - padding */
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto; /* use to position the box */ 
} 

/* set the top-right image */ 
.cssbox_head { 
    background-position: top right; margin-right: -15px; /* pull the right image over on top of border */
    padding-right: 40px; /* right-image-gap + right-inside padding */ 
} 

/* set the top-left image */ 
.cssbox_head h2 { 
    background-position: top left; 
    margin: 0; /* reset main site styles*/ 
    border: 0; /* ditto */ 
    padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */ 
    height: auto !important; height: 1%; /* IE Holly Hack */ 
} 

/* set the lower-left corner image */ 
.cssbox_body { 
    background-position: bottom left; 
    margin-right: 25px; /* interior-padding right */ 
    padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */ 
}

Now, for a live example, using the relevant CSS above.

You have a large box with a drop shadow you want to use as your maximum sized box (800px by 800px @ a whopping 5Kb for a 24-bit .png). Make sure this image is taller and wider than the largest box you anticipate you'll need.
The side margin is 15px on the outside of the file up to the "real" box edge (not including the drop shadow).
You want 25px of interior padding on the box.
You want the edge-to-edge box dimensions (omiting the outside padding) to be 320px.

These three critical measurements are indicated by the blue (max image), red (box) and green (inside content live area) bars below above the actual box:

max. image (350px)

"real" box dimension (320px)

interior "live area" (270px)

Simple CSS Rounded Corners Rock

This is a short sample paragraph.

And another one, only it's not as short, as you can see. We'll see how much you really like this when it's all said and done.

And if you're reading this far, don't you think you have much better things to do than reading inane commentary? Like feeding your pet Beta. Speaking of Betas, I had one once and failed to come home when pulling an all-nighter at the office. Arriving home to discover a dried, purple fish, no longer flopping on the floor. True story...

Show me a smaller box and hide the drivel...

So there you have it! Part 2 will cover the math behind the madness, come with a fancy 3D-box model type Illustration made popular by über-designer Mr. Jon Hicks himself, and might even offer a few other examples. Part 3 will attempt a fluid-version of the box, with an even bigger image! And Part 4 will sum it all up, with bonus material of a discussion of some cool things that MODx lets you do with CSS like making dynamic CSS and registering CSS to the head of a page (used on this demo itself in fact). Somewhere along the line, I'll include sample .PSD files to get you started making box images. And based on historical precedent, you can expect the series to be complete no later than mid-2008.

In the meantime, I look forward to your feedback and questions, below! (logged in forum account required)

Meta:

Comments:

Does this technique support gradients? by blissdev 23-Jan-06 02:52 PM

I've been working on a design that uses gradients, and I was wondering if this technique would facilitate that. I've got my own version working, that scales and everything, but less xhtml markup is something that I haven't quite acheived.

http://beta.blissdev.com - an example

This is awesome work by kmurray24 23-Jan-06 03:36 PM

Can anyone tell me how to get the rounded box without the header part? I will send lunch money if you can help...

Thanks!

by rthrash 23-Jan-06 05:08 PM

@blissdev: Vertical gradients would be tough to do... you'd need an extra wrapper div and to do the "negative space corners" as a white knockout image. Put the gradient in the bg of the extra wrapper.

@kmurray24: what do you mean without the header part? the header and H2 are needed for the top left/right images... if only IE supported generated content...

Just want content in a box by kmurray24 23-Jan-06 05:46 PM

Hi rthrash, Thanks for your help! I would like just the box. I would like to populate content just in the box and not the header. Any help you can give is greatly appreciated as this is a great solution compared to the rest... If I'm not being clear let me know....

Why does it have to be h2? by Simply 24-Jan-06 01:15 AM

I was playing with this and had tried using h1, after about an hour of fooling with it I realized you have to have h2. Could you explain why please?

Thanks.

Flexible? by singpolyma 24-Jan-06 05:44 AM

I know you'll likely cover this in a later post, but just thought I'd ask -- this DOES work if you change your box-size numbers, as long as you keep the number ratios the same, right?

No transparency... :( by Bryn 24-Jan-06 06:50 AM

A clever solution indeed. Unfortunately, this example only plays well with surrounding, solid-color backgrounds. So, no transparent/diffuse borders are allowed.

by rthrash 24-Jan-06 09:10 AM

@kmurray24: gotta have the header and H2(or any othere element there) in order to have something to attach the top-right and top-left images.

@Simply: all you need to do is change the selector from .cssbox_head h2 to .cssbox_head h1 and it should work perfectly.

@singpolyma: just follow the notes about the dimensions in the comments and it should work just fine.

@Bryn: I'm working on that issue exactly for Part 3 or Part 4. I'm almost there, too, although the positioning/dimensions are not nearly as straightforward.

Great stuff but having problems with it on IE SP2 by wireless18 24-Jan-06 11:21 AM

Nice update thanks for this.

Not sure if my test IE computer has some weird setup but it does not display correctly for me. It is IE6 on XP service pack 2. This is what the box on this page looks like http://www.wireless18.com/uploads/css/part2.jpg

If anyone knows of a particular problem with IE6 SP2 that is causing this I would be mighty grateful

cheers
Jonathan

This site has something similar... How is it different? by kmurray24 24-Jan-06 02:23 PM

Hi, found this link to something similar and I'm trying to see the differences. They look the same.. Can anyone tell me the difference. I'm new at this...

http://www.maxdesign.com.au/presentation/pullquote/

the differences by OpenGeek 24-Jan-06 10:54 PM

The major difference between the two techniques is that Ryan's technique requires only a single image, while the pullquote technique is actually using four separate images for the corners, and a background color for the main area. The benefit of the pullquote technique, is that you can expand the content width and height infinitely from what I can tell, while Ryan's is limited to the actual height of the single image (I just make it really long to handle most lengthy content). Choosing the best technique to use will probably depend on the context you are planning to use it in. I like them both, personally, and will probably make use of both in different situations...

by rthrash 25-Jan-06 06:02 AM

The missing scriptaculous calls have been restored, so you should be able to see the box shrink now as intended when not logged in and editing the silly article.

@wireless18: not seeing the problems with my SP2 IE6 install. Do you by chance have some extensions installed that change it's default behavior? I've heard that can cause issue sometimes.

Thrashbox! by kevin.marvin 25-Jan-06 04:14 PM

ThrashBox killed my borders!

That is all.

We all love teh ThrashBox.

Thrashbox! by kevin.marvin 25-Jan-06 04:48 PM

Fixed my borders.

Thank you THRASHBOX!

by rthrash 26-Jan-06 08:27 AM

LOL... for folks that want to see the first real live version of the (no longer named "ThrashBox") technique, check out Kevin's really cool upcoming open source (in Rails) ticketing system: http://simpleticketblog.weblogswork.com/

Also, with Big John's assistance (he is too freaking talented at prescribing fixes for the worlds IE-odditied and CSS maladies, did I mention that?) we finally nailed the technique for px widths using 24-bit PNGs with alpha transparency... now to work out the IE hacks for the bg images not scaling or squishing, if it's possible...

Part 2 should be cool, I hope!

Rounded corner issues by swolak 27-Jan-06 10:59 AM

I love this idea of a using either a single image or even 4 for the rounded corners. However, I am having a conflict with existing css rules and wondered if you could tell why I am having this effect happen?

http://www.ci.longmont.co.us/indexbox1.htm

Thanks

Rounded Corner Issues by swolak 27-Jan-06 11:05 AM

Never mind - figured it out ;-)

by rthrash 27-Jan-06 01:06 PM

@swolak: cool. Looks like you need to remove some padding or margin from teh .cssbox_head h2 though. Good job!

And the name mentions worked as I had suspected they would, so it wasn't just pointless name dropping after all folks. Now helping someone track down one of the foks mentioned in the article! ;)

Nice by edge 27-Jan-06 01:15 PM

Thats pretty nice Ryan. Certainly makes it easy to create one really nice image as the background. I think I would definately use this on smaller image boxes for speed and probably use something like the pulquote on big content boxes that need to expand width and height

holly hack by asdfasdf 01-Feb-06 08:33 AM

Apparently <a href="http://blogs.msdn.com/ie/archive/2006/01/31/520883.aspx">the holly hack won't work in IE7</a>

by rthrash 01-Feb-06 09:16 AM

Correct asdfasdf ... but !important should work properly, so the intended should work. Anyone test in the new public beta yet?

Margins are taking over! by propstm 11-Feb-06 11:09 PM

Ryan, for some reason my right padding is too high, or my left margin is too far back, but i've got this very ugly pushing of my content to the left. Any help to fix this would be appreciated.
http://img.photobucket.com/albums/0803/stuckinafridge/brokedScreen.png

my css is identical to yours with the exception the name for the original box.

Thanks alot, this technique rocks :) by Simply 18-Feb-06 03:11 PM

Thanks for publishing this. I'm using this on my site now :)

I've tried somethin... by heini 26-Feb-06 07:02 AM

Hi!
I tried to do this with a sweet Table... it does not work in IE6. Have you any ideas?
http://test.my-taxi.com/#c_akt-fahrten

by rthrash 27-Feb-06 12:41 PM

@propstm: impossible to say without seeing xhtml/css... sorry

@Simply: have a link to share?

@heini: which part are you having trouble with? sweet Table?

Magic behind the amazing 5Kb .png? by push 02-Mar-06 08:57 AM

Thanx a lot for this howto, really love it!
One thing which is keeping me busy though, is that i can't figure out how you managed to get that 5Kb png image.
I played for hours with The Gimp & pngcrush, but it always stays around 100Kb .. that's faaaaaaar from the 5Kb you got :(.

Can you please tell us (or point us to) the magic behind the whopping 5Kb for a 24-bit .png?

Magic behind the amazing 5Kb .png? by push 02-Mar-06 08:58 AM

srry 'bout posting 3 times by push 02-Mar-06 09:04 AM

sryy a little to hasty on the browser refresh .. i can't delete them myself :(

Change background colour in Vertexworx psd by dzjien 06-Mar-06 02:48 AM

Hi Ryan, the box you use on this page has a white background. When i open the psd posted on the Vertexworks page, the drop-box picture has a layer 1 with background color E5E5E5. Do you know how to change this color? Thanx, Dzjien.

Sorry... by dzjien 06-Mar-06 03:10 AM

Due to some Photoshop knowledge gaps, i asked the question in my previous post...color overlay and voila... :)

Still there is something i'd like to ask you. I'm trying to create a website with a container div with an all grey rounded box, and put some other (container) divs in there, also with rounded boxes as background images. Sort of nesting rounded boxes. Is that possible? Thanx, Dzjien.

Sorry... by dzjien 06-Mar-06 03:13 AM

at: rthrash by heini 07-Mar-06 03:26 AM

yes, rthrash: if you lookup the sweet table w/ IE you'll see my problem. there is a false rendering of negative margins i think and so the background-images of this sweet table are not positioned how they should.
perhalps i should browse positioniseverything for this.
any tips?

at: rthrash by heini 07-Mar-06 03:27 AM

background image dissapears in IE6 by j_bang 07-Mar-06 10:57 AM

this is a very elegant solution, and i've been looking at implementing this to boxes that are displayed dynamically upon user interaction. only thing is that the background image dissapears in IE6 when a box is hidden and then displayed again.

if anyone finds this problem interesting, please have a look at http://www.cilla.com/boxtest/

any help, suggestions or ideas would be greatly appreciated. cheers!

re: background image dissapears in IE6 by j_bang 08-Mar-06 03:22 AM

hrmph.. it seems that my above mentioned behaviour does not occur on my colleagues machines. guess i'll check my machine for extensions that might cause this.. as suggested previously in this thread...

re: background image dissapears in IE6 by j_bang 08-Mar-06 09:10 AM

seems that it was caused by the well-known problem in settings/temp internet files/check for later version of stored pages -> always.. d'oh..

gradient background by MaBu 15-Mar-06 03:26 AM

With some hacks and 2 other divs I got gradient background. In the biggest box http://marko.t35.com/tretja/projekt/projekt.php .
Now it is made from 4 pictures one for red, one for green, one for left middle and one for right middle. It works in all browsers and it's your code with 2 other divs.

by rthrash 15-Mar-06 01:20 PM

@push: I just made it in Photoshop and exported it... no secret mojo that I'm aware of, other than having lots of similar colors across the image (works best for the compression algorithm used by .png files).

@ Dzjien: Sure, you can nest as many boxes as you'd like, only I'd probably not use this technique for the containing box as you'll probably need a header and footer section anyway and you could do that styling there.

@heini: sweet table???

@MaBu: nice work :)

by push 23-Mar-06 10:39 AM

Thanx rthrash! I'll try it out on a machine with Photoshop installed. (To all Gimp developers: Srry i'll have to commit aldutary for this one :) ).

by rhubarb 03-Apr-06 03:58 PM

Has anyone tried this with transparent background and non-transparent corners a la the Mountaintop Corners article over at ALA?

Also is anyone using this for rounded buttons. I'm trying to make my links into buttons with a small round rectangle like this - but messing with the paddings gets it all out of whack.

by andymilli 12-Apr-06 08:28 AM

I've found that IE5 messes up the left margin of the box when aligned to the left, moving the left edge of the box around 20px to the right. This makes the box narrower, and if the content is a fixed width (such as a table of data) the box breaks.

by andymilli 12-Apr-06 08:32 AM

I've put up some screenshots and my code to illustrate the above problem:
http://server21.dedicateduk.com/~ntrl/events/test/demo.html
I need to be able to put a table in one of these boxes. I've tried different variations (table width in percent, nested divs etc) but none have worked. Any suggestions?

by andymilli 12-Apr-06 08:52 AM

betta fish by 12-Apr-06 10:05 PM

You spelled betta wrong. It's betta, not Beta. And I did feed mine, thank you very much. No, I have nothing better to do.

Also, Photoshop apparently has better png compression than other programs. I tried exporting a simple 1000x1000 box with a drop shadow in Illustrator, and the png format was 24K. In Photoshop, the exact same box came to 6.9K. Go figure...

Still, it seems that for an image with >256 colors, gif is still the way to go...

Anybody played around with box transparency? by tzmedia 14-Apr-06 10:10 AM

I just did in the firefox live CSS editor adding:
Two lines of code to the .cssbox properties for example...
-------------------
.cssbox {
-moz-opacity: 0.5; /* line one added */
opacity: 0.5; /* line two added */
--------------------
Worked like a charm in firefox!
This is going to be fun playing around with rounded corner boxes placed over gradient image background for example.

More than one? by jrich 14-Apr-06 06:49 PM

With this code, can there be more than one box on a page? What I'm looking for is two of the same thing side by side.. any ideas?

More than one? by jrich 14-Apr-06 06:50 PM

With this code, can there be more than one box on a page? What I'm looking for is two of the same thing side by side.. any ideas?

Another Method - Nifty by EricTheDude 14-Apr-06 06:53 PM

http://pro.html.it/niftycube/

This is also a very "nifty" way to achieve CSS corners sans any graphics at all. Relies on a bit of Javascript for dynamic CSS generation. Well worth investigating...

Transparent Corners by z_malloc 21-Apr-06 04:08 PM

I noticed that this method requires that the corners are opaque. When they are transparent, some wierdness occurs. digg.com uses a similar technique, but they have managed to get transparency working. Would be great if that could be sorted out. Anway, thanks for the tutorial.. I love this technique! VERY useful!! I intend on using it frequently!

transparent drop shadows no go! by rthrash 01-May-06 09:31 AM

That is if you want it to show up in IE5.5 or IE6. IE7 beta gets it right. The problem is the hackery involved with the alpha image loader on the background image, and not being able to position those. I'm defeated! LOL

flexible width not working on i.e. by willotoons 13-May-06 08:52 PM

Hey Ryan! Thank you so much for this tutorial! I'm doing my first all-CSS-layout (finally catching up) so this was exactly what I was looking for. You can see my humble beginnings here: http://willotoons.com/campconnect/2ndlevel.html

However, it seems the main column - which has a flexible width using min/max - is having problems in I.E.6/Win (and most likely not on some others, either): the right side, body & bottom isn't appearing. The right column (column2) has a fixed width, so those are showing up fine (I will be using the colored boxes in other place at different sizes so I didn't want to put a fixed width on the actual box styles), but I'd like to keep the main column flexible if possible.

Can anyone help me figure out what might fix this?

eep by willotoons 13-May-06 08:55 PM

should be "(and most likely in others, as well)"

Combining Towering Inferno & Thrash Box by Chris Williams 19-May-06 02:15 PM

Hi there Ryan,

Just thought I'd thank you for inventing this very useful technique - I've used it on many occasions since you first wrote about it back in 2003.

Just thought I'd point you and any other poeple who may be interested to an article I've written on merging Thrash Box with the Towering Inferno technique from Position is everything. This means you can now have bulletproof, fluid columns using Thrash Box, whist also making all columns equal height. I'm sure this has probably been done already, although more references and onformation on this can't hurt!

Thanks again,

Chris Williams

Combining Towering Inferno & Thrash Box Cont... by Chris Williams 19-May-06 02:18 PM

And here's the link if you're interested seeing as I forgot to include it in my last post!

Doh!

http://www.chriswilliamsdesign.com/article/19/Towering-Thrash-Box-Inferno

I figured it out, but went a diff route... by willotoons 28-May-06 04:01 PM

To follow up, 2 weeks later, I thought I'd let you all know I fixed the IE6 bug by adding a width:100%; to the div#contentarea. IE6 needs to have something to work with or it gets confused. I also found that adding a line-height:1.5em; (or any value) helped me at one point with text not showing up in the boxes on IE. I've put this info, and some links to other extremely helpful sites that address the floats/IE bug issues, on the same page I posted a link to above.

I also link to the method I ended up going with instead - the Schillmania Rounded Corners, which I found to be really easy code to follow and eliminates the worry of not having an image large enough for if/when my client creates a really long page full of copy.

I've learned a TON! All the best to everyone in your CSS adventures. :)

Is Fixed Height Possible ? by alex 08-Jul-06 12:11 PM

Using the above example, I was able to produce a version that had a fixed-height body by putting "heright: 300px" or whatever height I wanted under ".cssbox_body".

I was not however able to set a fixed-height heading. I am not so worried if I need to add a couple of extra tags (although I would of course prefer not to) but can anyone find a way to make this work?

If, for example, there were two columns of these boxes on a page - it might be preferable to have the tops and bottoms of each header / box in-line with each other.

Or, you might have several rounded corner boxes on a page - some with single line headings and others with 2-line headings - and you might want the headings to be the same height irrespective of how many lines are used.

Thanks,

Alex.

by jimb0 22-Jul-06 02:55 PM

This is the best technique I've found so far, but there are three problems when using it:

1. When using transparent images at the corners, its opacity will be doubled, since images will be layered on top of each other; you can't use real transparent drop shadows (FF only, since IE6 doesn't support transparent 24-bit PNGs)

2. When the image has an odd width or height, resizing them produce artifacts, so always create the box image as having an even width and height (FF only, it seems?)

3. As the text article mentions, you need the image to be 'at least as big' as the div that will contain it, so if you want to use it to be around your whole content/page, you're screwed... because you will need a huge image.

Can somebody come up with solutions to these problems? There's some layout I'm trying and I can't get it to work because I'd need that for the thing to be really adaptive.

And geez, why can't CSS layout be as simple and as straightforward as doing it with tables? I know tables are so 90's, and CSS is so the future omg, but I can't stand how it'd be easier to do this with tables, while I'm spending way too much of my time to come up with a CSS solution that doesn't even work as much as the table one would... and it still has a lot of hacks I have to deal with. Whew. I mean, really.

Getting rid of the header by rorschak 03-Aug-06 08:17 PM

After trying this out and messing around for a bit I stumbled on a way to have the box without the header. You're not actually getting rid of the header, just positioning things on top of the text and changing the font color of the header text to the same color as the background. The easiest way to do that is to have the header in a <span> tag. Granted this messes up margins and things royally in all version of IE, but it still displays nicely in Firefox and Opera 9.

P.S. This is my first try at web design using all CSS, and making it fluid. So the entire site is kinda rough.

Oh yeah by rorschak 03-Aug-06 08:18 PM

And if you want to see what I'm talking about I should probably include the link. http://www.infiniteloopdesigns.com

Parts 2-4 aren't anywhere yet, are they? by zu 23-Aug-06 03:09 AM

I try to use this technique on a elastic layout and it seems to work quiet well by just leaving the width away.
I haven't yet had the time to look at it in more detail but of course some of my questions would be answered in the articles parts 2-4. So if there there already, I really would love to find them. But since it's not even 2007 yet I don't exept them to be anywhere yet ;-).

But thanks for this article and the nice concept.

by moddy 05-Sep-06 09:43 AM

Hi, can anybody help me and tell me what I do wrong; the left side of the body part goes out of line and I can't find why. Have a look at: http://hoth.bedrijven-site.nl/boxtest
Thanks Rob.

Hey moddy by bullrat 28-Sep-06 11:23 AM

I'm no expert but it looks like you removed the "top" for your .boxbody class. See below:

.boxbody {
background: url(img/sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}

Try this instead for your padding line:
padding: 1px 5px 30px 31px;

Hey moddy by bullrat 28-Sep-06 01:30 PM

Hello Bullrat by moddy 04-Oct-06 03:26 AM

Thanx for your suggestion, I tried it but did not solve the problem.

by Xsss4hell 13-Nov-06 05:28 PM

you're not really the inventor of this..
I saw that a year before on a web page..
but you improved it...maybe without knowing that something like that existed before..
however great work

by mickey 15-Nov-06 02:05 AM

Does anyone know how to make the interior padding to be zero? i.e. the interior size to be the same as the real box size

by mickey 15-Nov-06 02:19 AM

Does anyone know how to make the interior padding to be zero? i.e. the interior size to be the same as the real box size

image in header by mickspace 29-Nov-06 04:47 AM

does anyone have a read on this? i've tried placing it between the <h2>'s & keep getting the image aligned right with the box edge...

thanx!

image in header by 29-Nov-06 02:56 PM

does anyone have a read on this? i've tried placing it between the <h2>'s & keep getting the image aligned right with the box edge...

thanx!

2 boxes in row by Stan 11-Jan-07 08:53 AM

Thanks a lot bor that box :)

Does anyone know how to have 2 boxes in a single row as when I use the code the 2 boxes are aligned vertically ?

HELP by litotes 27-Jan-07 01:49 PM

http://www.litotes.net

We used the code to form the box on the right and for some reason can't get that little nub poking out to disappear, any suggestions?

nice by sakib000 12-Apr-07 09:39 AM

nice work. this is easy i will us <a href="http://www.photosharingworld.com">here</a>

Stray Line from Box Image by homoon 02-Aug-07 06:14 PM

Greetings, thanks for the wonderful resource. I've spent many hours trying to find a amateur-friendly version of the curved box. I have the box formatted per your specifications but I'm getting a stray line where the header and body meet.

http://dbmarketingminer.com/

Is there something I can do to remedy this? It's not a big deal at all but fixing it would satisfy my perfectionist tendencies.

Many Thanks,
Aaron

Stray Line from Box Image by homoon 02-Aug-07 06:18 PM

Stray Line from Box Image by homoon 02-Aug-07 06:24 PM

Stray Line from Box Image by homoon 02-Aug-07 06:26 PM

CSS by binobose 06-Nov-07 02:00 AM

This is kind of too heavy styling.it can be more simpler than this.

www.codepal.co.nr

CSS Issue by 2parts 16-Nov-07 05:15 AM

Hello,

how can I place a/two float containers into cssbox_body? I tring it for hours - but I have no idea :(

Use as a Target Area with Rollover by EarlThorfinn 18-Nov-07 01:46 PM

Thanks for the awesome code.

I'm trying to get the box to function as a 'target area' where the background changes on rollover (eg. the download button http://www.mozilla.com/en-US/firefox/). Any ideas on how to do this by modifying the above code?

(I would use the same code as the mozilla page, but need the box to be able to stretch both horizontally and vertically)

part 2-3-4? by darth 19-Dec-07 01:40 PM

Where are the parts 2,3 and 4.

Stray Line from Box Image by homoon by bytescream 28-Dec-07 12:46 PM

Your ".posts h2 {...}" style is messing up your css box header because it sets a line height and that sucks the bottom of the H2 box header up 2 pixels. You need to unset the H2 line-height that cascades from the ".posts" style.

what about the widthless boxes? by brianbotkiller 24-Feb-08 11:54 PM

Firstly, this is the coolest rounded corners code I've seen - and I'm not a very good coder, so I like stuff that is usable and quick. So thank you!

Secondly - on the referring page to this blog, you have something about the widthless boxes, and they work - but they use two different images, not just the one .png... is there a way to do this with the current thrashbox implementation with the .png? Or was that abandoned?

Thirdly - I am using the thrashbox code, but I'm finding that it gets a bit horked when I put a lot of data into it - as if the image doesn't grow with the text being entered into the div field - is there a way to get around this? Do I need to do something to my margins to get the image to grow with the text or other content I enter into it?

Thanks again.

positioning rounded corner box on page by MomentoMan 28-Apr-08 04:33 PM

Am new to CSS so need guidance...How can I code to position the box other than the default "centered" alignment? I tried wrapping another division around the rounded corner code but can't understand how to make it behave. I want to put the rounded corner box around a left-nav set of links and align it against the left page margin. Any suggestions?

Thanks

using CSS3 border-radius with IE fallback by masterleep 17-Sep-08 05:45 PM

Safari and Firefox now support CSS3's border-radius, so there's an elegant way to do rounded corners in those browsers. I wrote an article describing how to do so with fallback for IE, keeping the same HTML, here:

http://www.bestinclass.com/blog/2008/simple-rounded-corners-with-css3-box-radius-and-fallback-for-ie/

Semantics by togaen 29-Sep-08 05:22 PM

"semantic, rounded corner boxes using CSS"? How exactly can rounded-corner boxes be semantic?

You must be logged into the forums to comment. Please login

MODx CMS and PHP Application Framework

Simple Rounded Corner CSS Boxes

Part One: Historical Info, then the Goods

Simple CSS Rounded Corners Rock

The Site

Authors

Site Search

Downloads

Tools