homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Rounded Corners
a tutorial by the fan club of the rounded-corner boxes
hakre




msg:1181683
 10:43 am on Sep 9, 2005 (gmt 0)

one very nice way to use css is to apply a style on the documents' xhtml structure. by doing so, this devides the document into content and into it's graphical (or whatever) representation. this is even more nice if you combine this with a webapplication because it reduces coding.

hackers love noodles - errgh tables
i'm doing websites since years and from time to time i fall in love with boxes, espeacially the ones with rounded corners. all the years i made them by using a table with 3 rows and 3 colums and then putting gif images into the corners:


/.........\
------------
..content..
------------
\........./

that worked quite nice but produced a lot of html code: 1 table, 3 tr, 9 td and 4 img tags.

however while switching over to css based designs within the years, i often asked myself, what is a nice way to have the corners appearing round - but only by using one div if possible like:


<div class="rounded-red">content</div>

to get rid of my beloved html 3.2 tables.

i know i'm not the only one who did it like this and if you've got your own solution how to create rounded corners by using css, i'll be glad to know and to found the fan club of the rounded-corner boxes :) .

for me it was clear to have the corners rounded by images, because that's the only way to do so today. since putting <img> tags into the xhtml code only to have an image placed in the corner is not quite nice. on the other hand, the only solution to attach an image onto a <div> is by using the css background property. but when using the background property, you can only apply one image, but i need 4 images, one for each corner.

since the css pseudo classes :after and :before do not work with IE currently in use, there need to be 4 tags at least for applying four cornerimages. if the rounded box has got a fixed width then it could be reduced on 2 tags for two cornerimages.

so i said byebye to "having one css applied div-tag" (the best practise case) and started to create a "some" div solution, which is not as delicious. the good in stepping away from using a table with images is, while using background css properties, all the images are relativly linked to the css file, so writing a box with rounded corners later on is in no way envolved with the location of the file or url later on. even a chunk of code begin generated within a template system or webapplication has not to care about. another plus is the reducement of xhtmlcode needed to be written and the big plus of editing the rounded corner boxes appereances later on.

since css' background property is powerfull, it was quite easy to get results fast. my concept was to create a div on top to take care about the top-left and top-right corners. then there is the content-div which only needs to have the background color and another div is taking care about the bottom-left and -right corners. since i'd like to create a colored box, i only needed inverted corners as gif images "cutting out" the corners counterparts from the colored box. this works because background images are placed over background colors. but how to put two corners into one div without using an <img> tag? my straight answer was to put another two divs into the soupe and applying the images as background again there, too. becaue of the background postition property they are automatically arranged on the right end of the block element.

finishing move
as said, this was fast done and worked like a charme ... until i watched that in IE. urgs. to make a long story short: the fix was to apply a font-size of 0px to the outer div because IE just extends the height for the block element to it's font-size even if there is no char at all in there.

warning: i have not tested this implementation on mac osx, but i guess it will work quite right and no more "hacks" are needed.

finally it's all done with 5 div tags and a css definition useable everywhere. additionally a 6th div can be used as block element around this "rounded box" applying another color or similar.

the code

<style>
.rrto, .rrcn, .rrbo {background-color: red;}
.rrto, .rrto div, .rrbo, .rrbo div {
height: 4px;
background: red url(crn-tl.gif) no-repeat;
font-size: 0px;
}
.rrto div {
background: url(crn-tr.gif) no-repeat top right;
}
.rrbo {
background: red url(crn-bl.gif) no-repeat;
}
.rrbo div {
background: url(crn-br.gif) no-repeat top right;
}
</style>

<div class="rrto"><div></div></div>
<div class="rrcn">#content#</div>
<div class="rrbo"><div></div></div>

--hakre

 

Sathallrin




msg:1181684
 1:54 pm on Sep 9, 2005 (gmt 0)

Here is a slightly simplier version which produces the same look:


.rounded_box {
background: red url(crn-tl.gif) no-repeat top left;
}
.rounded_box div {
background: url(crn-tr.gif) no-repeat top right;
}
.rounded_box div div {
background: url(crn-bl.gif) no-repeat bottom left;
}
.rounded_box div div div {
padding:4px;
background: url(crn-br.gif) no-repeat bottom right;
}
</style>

<div class="rounded_box"><div><div><div>#content#</div></div></div></div>

It uses only 4 divs instead of 5, and the CSS is a bit cleaner. It doesn't require you to specify a width for all sections if you wish to have a fixed width. The padding can be adjusted based on the size of your images, and the content will not fill in the borders.

You could stick one more div around the content, and then set the background color of that, and the effect will be a full border with rounded corners.
Like this:
<style>
.rounded_box div div div div {
padding:0;
background: white;
}
</style>
<div class="rounded_box"><div><div><div><div>#content#</div></div></div></div></div>

dcrombie




msg:1181685
 2:15 pm on Sep 9, 2005 (gmt 0)

The latest build of Safari supports (CSS3) rounded corners for borders ;)

bubblebug




msg:1181686
 2:28 pm on Sep 9, 2005 (gmt 0)

I like that, I was thinking of a dirty nested method:

<style>
.tlcorner {
background: red url(cnr_tl.gif) no-repeat;
}
.trcorner {
background: url(cnr_tr.gif) no-repeat top right;
}
.blcorner {
background: url(cnr_bl.gif) no-repeat bottom left;
}
.brcorner {
background: url(cnr_br.gif) no-repeat bottom right;
clear: both;
padding: 10px;
}
</style>

<div class="tlcorner">
<div class="trcorner">
<div class="blcorner">
<div class="brcorner">
Hello I am some text.
</div>
</div>
</div>
</div>

Simple but probably wrong. Its easy for my brain to follow.

It looks almost the same as above but the above method is more refined than my hammer a nail method.

hakre




msg:1181687
 2:43 pm on Sep 9, 2005 (gmt 0)

@Sathallrin
indeed this comes in quite handy and is a thing i thought about. since i plan to use divs within the content, i guess things can be mixed up a bit but your concept makes a very nice use of the background positioning params.

@dcrombie
m$ noticed that and they said they have no plans on this nice feature - what a pitty!

createErrorMsg




msg:1181688
 2:49 pm on Sep 9, 2005 (gmt 0)

Soren Madsen wrote a seminal article on this technique several years ago called "Creating Custom Corners & Borders." I highly recommend both the article and the technique. It's fluid, fairly easy to implement, and best of all, it achieves a certain amount of code cleanliness by applying several of the images as backgrounds on semantic elements within the div, rather than adding extra divs and bloating the code.

Essentially, the structure is...

<div id="the_box">
<h2></h2>
<div id="the_body">
<p></p>
</div>
<div id="the_footer">
<p></p>
</div>
</div>

The background images are then applied to the following elements...

Top Left = #the_box
Top Right = #the_box h2
Middle = #the_body
Bottom Left = #the_footer
Bottom RIght = #the_footer p

Note that several images are applied to semantic elements (the h2 and the p) making for a little less source code. With a little creativity and some knowledge of the particular structure of the content of your box, this model can be adapted to use even less code in certain situations.

cEM

MatthewHSE




msg:1181689
 3:07 pm on Sep 9, 2005 (gmt 0)

cEM's suggestion is the one I've used with pretty good effect. I never really liked the idea of adding extra elements just for presentation purposes. The problem is that not every box that would look good with rounded corners requires enough semantic elements.

There's some pretty good stuff mentioned over here about "Nifty Rounded Corners [techpatterns.com]" with no images. The downside is that it uses a little javascript, but it degrades well with JS turned off. The big advantages with this are that it doesn't require any extra elements, and it's entirely scalable. The fact that no images are needed is negated in my mind by the amount of javascript you have to deliver instead.

Mr_Brutal




msg:1181690
 3:10 pm on Sep 9, 2005 (gmt 0)

My approach for this was to use 4 spans with unique (obviously) ids.

Then whenever I want a rounded box I create a div, add the 4 spans right at the top, followed by whatever content I want in the box. The four spans are positioned absolutely in the four corners of div. Giving a round cornered div that can also by styled/positioned however you want.

I may have to read the article mentioned above though!

hakre




msg:1181691
 1:14 am on Sep 10, 2005 (gmt 0)

@MatthewHSE:
i was talking about (x)html and css. javascript (call me ecma) has the style of quick- and dirty-ness and i really dislike it. that's a very personal opinion maybe, but for the fan club of rounded-corner boxes constitution ecma is far far away ;) say sorry, but i know there is an open source javascript cross plattform implementation lib, so heads on. even photoshop does support it and we all should not miss xul and her friends, should we? what do you think about the combination of css and js?

@Mr_Brutal:
in case you mean unique = id, i don't get you wrong, but while using boxes, there are plenty per page so unique might be wrong and i preferred class. that's all about the class/id discussion to say i guess. as usual: correct me if i'm wrong.

[edited by: createErrorMsg at 2:15 am (utc) on Sep. 10, 2005]

MatthewHSE




msg:1181692
 2:32 am on Sep 10, 2005 (gmt 0)

Yes, js is kind of a "less than desirable" solution to rounded corners. I only mentioned it because, for the time being, that's the best solution I've found for scalable rounded-corner boxes without adding non-structural elements. Thus, in my opinion, the javascript really is the cleaner way of doing it, for the time being. (And provided your box doesn't have enough structural elements to use cEM's suggestions.)

About the combination of CSS and javascript, I'm not sure about that. I can definitely see potential with the idea, but then I'm also not sure that's the direction CSS ought to go. You can already do a lot of things by parsing CSS for PHP at the server level, and I'm inclined to think that's about as far as it needs to go as far as mainstream use is concerned.

As far as CSS is concerned, you might call me a "CSS purist in the future-tense." ;) What that means is that I'm all for the elimination of presentational markup, getting rid of hacks, and not using js for presentational purposes, but I don't think the day has yet come that such a goal is 100% attainable in the real world. It's coming, though, and I'm doing everything I know to bring it along. When it comes, I'll be ready for it. In the meantime, I'll (grudgingly) do all the things I just mentioned, sparingly, provided they degrade gracefully and aren't too hard on the old bandwidth bill! ;)

However, as much as I question the general use of javascript for merely presentational purposes, I think it is finally starting to come into its own as a robust programming language. AJAX has incredible possibilities, far beyond what server-side programming could do alone. But then, that has nothing to do with presentation or rounded corners, and thus is another conversation for another time! ;)

Hopefully someone can benefit from the link I posted. I won't claim it's the best solution for everyone, but I do think it's a viable option for some.

Storyman




msg:1181693
 8:09 pm on Sep 10, 2005 (gmt 0)

Hakre,

Is it necessary that the box's width be fluid? If not you can certainly get away with less coding.

hakre




msg:1181694
 9:04 am on Sep 11, 2005 (gmt 0)

@Storyman

quoting you
Is it necessary that the box's width be fluid? If not you can certainly get away with less coding.

quoting me
if the rounded box has got a fixed width then it could be reduced on 2 tags for two cornerimages.

:) i think we mean the same. using 2 cornerimages instead of 4 is possible then. but my box ain't fixed width and i wanted to keep the issue general.

oddsod




msg:1181695
 11:35 am on Sep 11, 2005 (gmt 0)

Soren Madsen wrote a seminal article...

And, searching for it in Google [google.co.uk] brings up this WW page in #1. It's going to become more and more difficult finding things in Google if WW takes up top spaces for everything. :(

Anyway, finally found the article here. Browsed through it and looked at the final finished product. Ahem, it's broken in Firefox. I know why I go "arrghhh!" whenever I've got to do some CSS.

<added> Removed the links to the article and "finished product" as WW doesn't seem to like the alist-apart (no hyphen) URL, and the swear filter kicks in.

createErrorMsg




msg:1181696
 2:55 pm on Sep 11, 2005 (gmt 0)

Here's the link to Madsen's article on his own site.
Customized Borders and Corners in Flexible Layouts [picment.com]

Oddsod, not sure what you're seeing that is broken in FF, but I've used this technique a number of times and it works fine when properly implemented across every non-legacy browser (and several legacy ones) I've ever seen it in. Can you describe what's "broke"? (Note that, with the images Madsen uses, a few of his boxes don't extend the full width of the screen at higher resolutions. This is simply a question of sizing certain images correctly, though, not a shortfall of the CSS.)

cEM

oddsod




msg:1181697
 2:52 pm on Sep 12, 2005 (gmt 0)

cEM, the header and footer [picment.com] both look broken to me in Firefox 1.0.4 on XP. See the white box with rounded corners? It's like someone stuck a rectangular piece of the background over each of those boxes. <added: It also looks broken in IE 6.0>.

Can't see the same error? Try changing your resolution to 1280x1024. It's even worse at 1600 x 1200. Just when you thought that you could cope with all the quirks and workarounds to get the simplest design working in the major browsers it turns out that it doesn't really work if someone's using a different resolution! What was it I said earlier about the sentiments CSS evokes? Oh, yes, it was aaarrrggghhh!

If these seminal works by people who deserve the greatest respect still get all messed up, what hope have idiots like me got?

MatthewHSE




msg:1181698
 2:57 pm on Sep 12, 2005 (gmt 0)

That's an image issue, not CSS. The images making up the majority portion of the boxes should have been wider. My guess is the author didn't want to make the images that much larger for such a small portion of users.

createErrorMsg




msg:1181699
 3:26 pm on Sep 12, 2005 (gmt 0)

As matthewHSE says, the display quirk you mention is a result of images that aren't wide enough for higher resolutions.

I suspect this was because the article was written at a time when 800X600 was a far more predominant screen resolution than it is now (the article is several years old). And, of course, I think the author probably expects that we will create our own images. If you make the upper and lower left hand images at about 1500px wide, you shouldn't experience that particular problem at all. The CSS, however, is rock solid. :)

what hope have idiots like me got?

Lots! ;)

cEM

oddsod




msg:1181700
 4:39 pm on Sep 12, 2005 (gmt 0)

OK, OK, it wasn't the CSS, it was the image (though I have this nagging feeling that if the design was table based the image size wouldn't be an issue at all - if it displayed OK in 800x600 it would display OK in 1600x1200).

>> Lots!

Thanks for the encouragement. OK, I'll plod on. But, warning: It may be a while before the term CSS gets me all excited and panting for breath.

MatthewHSE




msg:1181701
 4:58 pm on Sep 12, 2005 (gmt 0)

Actually, if the design was table-based, you'd be in even worse trouble. Not only would you need more images, but you'd be stuck with fixed-width since each image would be the "content" of a <td>. So CSS actually gives more flexibility in this area.

It may be a while before the term CSS gets me all excited and panting for breath.

Don't worry, it won't be that long! ;) Seriously, once you work with it for awhile, a few key concepts wil "gel" and you'll be an instant and enthusiastic convert. Just give it a little time for practice - it WILL come, and when it does, you'll be thrilled with the possibilities!

appi2




msg:1181702
 5:41 pm on Sep 12, 2005 (gmt 0)

Why not create the rounded corners with pure css.
You don't need any images to create a box with rounded corners.


<style type="text/css">
.raised {background: transparent; width:400px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
</style>
</head>
<body>
<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
put yer content here
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
</body>

Not all the above may be necessary, just a quick cut n paste post!

MatthewHSE




msg:1181703
 5:55 pm on Sep 12, 2005 (gmt 0)

That's a creative idea, but personally I prefer images to all that extra markup. Still, the concept may come in useful sometime - thanks! ;)

appi2




msg:1181704
 9:51 pm on Sep 12, 2005 (gmt 0)

Tis just a bit of css fun.
And far too much code :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved