Spanky Corners 1.0 : Rounded Corners + Clean HTML + No JavaScript

Of the many interesting arguments raised during our recent discussions centering around Greg’s Spiffy Corners and markup in general, one point was difficult to argue — ’If you say this isn’t the answer, what’s your alternative?

Fair point too.

At the time, I successfully skated around a real answer to that question but, with a Design View due and nothing to write about, I decided to take a crack at an answer. The alternative I published last month was quite raw, but with plenty of help from Lox, Matt, Kevin, Tom and Craig, Spanky Corners is now at a stage where we think it’s relatively robust, useful and usable to a wide range of web developers.

The advantages are easy to recognize.

Screenshot of Spanky Corners

  • Super low-fat HTML
  • No JavaScript required
  • No practical limitations on corner radius
  • Valid XHTML (strict) and CSS
  • Accessible
  • Tiny graphic requirements
  • We generate the images and CSS for you!

The only foreseeable drawbacks we see are:

  • Dependence on a minimum HTML structure (i.e. single paragraphs can’t work).
  • SOLVED: An IE6 user scaling his/her font-size up will see a small gap develop at the top left

I’m still not convinced there isn’t a way around the IE6 issue, so let me know if you hit paydirt.

Spanky is tested in IE6, IE7, Firefox 1.5, Safari 1.0 and Opera 8.53.

We decided to totally ignore IE5+5.5 support as those browsers don’t support list-images well enough. In practice, we recommend using conditional comments to strip the rounded graphics from IE5 altogether.

We’ve provided a fairly in-depth explanation on how it all works and FAQ, but you might want to just play with the generator and the code to get a feel for it.

Hope you find it handy, and if you stumble across any improvements, lets us know. It’s certainly a work-in-progress.

We’ve rejigged the way IE renders the top-left corner ( basically swapping the list-image for first-letter in IE only ) allowing it to scale smoothly in both directions. If you wanted to update any code you downloaded earlier, you’ll only need to update the conditional comments.

We have also broken the IE-specific code into it’s own style sheet and made the whole thing downloadable as a ZIP file.


Take Spanky for a test-drive here

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • babyboy808

    I noticed you are using IE conditional statements, I thought this was a bad thing in standards?

  • http://www.sitepoint.com Matthew Magain

    Hi babyboy. The IE team actually recommend that conditional comments be used when the behaviour of IE deviates from other browsers. It’s a propietary method, but it validates and is easy to remove once you decide to drop support for that browser. It’s CSS hacks (like the famous “* html” hack) that should be avoided.

  • http://www.sitepoint.com AlexW

    I noticed you are using IE conditional statements, I thought this was a bad thing in standards?

    Not at all. Quite the opposite in fact. Validators and other browsers read the CC as a valid HTML comment. IE reads them in exactly the circumstances we want it to, even down to version number.

    And unlike garden-variety hacks that rely on known rendering engine bugs, Microsoft can guarantee us they’ll work forever.

    Throw in the fact their syntax doesn’t require ESP to understand and there is a fair bit to like about them.

  • http://www.sitepoint.com AlexW

    Snap!
    ;)

  • Pingback: Canglan’s Blog 沧蓝品味 » Spanky Corners 1.0 : Rounded Corners + Clean HTML + No JavaScript

  • Pingback: Ellis Web » Items of Interest: 2006.05.02

  • http://blog.bitxtender.com/ Wombert

    It doesn’t work properly in Safari either. I’m seeing a gap for the top left corner when increasing the font size.

  • Pingback: Spanky Corners at The Hero Dies in This One

  • Sojan80

    I’m also seeing some odd behavior with Firefox 1.5.0.2 The text for some boxes doesn’t seem to line up at all…

  • http://www.designity.nl peach

    cool, you save 2 out of 4 elements by using a hacking up a list image style, neat idea. but why does it need to be presented as a revolutionary super-advanced web 2.oh! thing, complete with a generator and a website with a cool layered graphic.

    And then when I view the example, it doesn’t even work, there is a blue bar sticking out. no-wonder it hasn’t been used yet, you exclude every user who uses ie6 and have text-size set other then default. Lots of people have ie6 set to “small”, and they will have messed up corners rather then rounded corners.

    So congratulations with your revolutionary method that doesn’t work :p
    Sorry to sound so negative, but you kind of built up the expectations with the way you presented a simple CSS fix that isn’t cross-browser compatible.

  • http://boyohazard.net Octal

    Works fine for me; Firefox 1.5.0.2 :P

  • timjpriebe

    Looks absolutely hideous and unusable in FireFox 1.0.7. Maybe I need to upgrade, but if it looks terrible in that version, I would be unlikely to this method on any of my clients’ sites.

  • warjockey

    There’re some smart ideas in this method. Such as turning the h2 into a list-item then being able to put 2 images (left and right).

    However I would still use DOM to wrap around with divs for my own projects. This looks like a hassle to get the proper amount of text inside and stretch to the corners. Too messy IMO.

  • svanpoeck

    I like it :)

    One thing though: in FF 1.5.0.2, when you oversize the font more than 2 levels, the upper left corner gets a horizontal bar on the H1 tag. Not on the others. Undersizing the font does not affect any corners.

    Good CSS digging,
    Steven

  • Pingback: Pyöreitä kulmia, osa n | Satunnainen Björklund

  • http://www.sitepoint.com AlexW

    Gee, Peach, apologies for trying to make a relatively involved method easy to experiment with ;)

    The IE6 text scaling issue is well-acknowledged. If you are willing to lock your headings sizes to pixels in IE, it’s solved. At this stage we’d prefer to point the issue out and see if anyone can come up with a cleverer work-around.

    Looks absolutely hideous and unusable in FireFox 1.0.7.

    Had this problem with 1.0.7 a little while ago. Can’t remember what caused it, but should be very fixable.

    One thing though: in FF 1.5.0.2, when you oversize the font more than 2 levels, the upper left corner gets a horizontal bar on the H1 tag. Not on the others.

    Steven, that one is pretty easy to handle. The h1 is closest to the size of the list-image so it doesn’t take a lot of scaling to make the text bigger than the image. A taller list-image (and adjusted line-heights) will give you more ‘scaling room’.

  • http://www.maxhyatt.com MystaMax

    Looks great in my FireFox 1.5.0.2 and Internet Explorer 6.0. It did break (as you stated it would) when enlarging the font. Oddly, it didn’t break in Opera 9 beta at all. I was able to zoom to 200% with no issues.

    Anyway good tip/tutorial. It’ll prove very useful in the future. Thanks Alex!

  • http://www.realityedge.com.au mrsmiley

    IE7B2 looks strange when using the zoom on the top left corner. There is a weird outline around the image. Try the following settings using the public IE7B2..

    Foreground: ffffff
    Background: ff9900
    Radius: 20
    Header tags: h1,h4

    Text Size: Medium
    Zoom: >= 150%

  • http://www.sitepoint.com AlexW

    Yep, both Opera and IE7 actually scale up the list-image along with the text, which keeps them in sync — albeit with an increasingly jaggy edge.

    mrsmiley, I think that line is just part of Microsoft’s image scaling method, and though not perfect, I can live it. I’d be happy if IE6 did the same.

  • Martin S

    Is it just me or is someone else having problems viewing the page:
    http://artikelbanken.dk/spanky.png

  • Martin S

    I found a solution to the problem. By pressing back on the history button and then forward, the page comes out ok.

  • old_expat

    Im wondering if, when this “rounded corner thing” eventually gets perfected, people are going to be saying, “It’s just soooo 2006 ish.”:)

  • http://www.sitepoint.com AlexW

    Im wondering if, when this “rounded corner thing” eventually gets perfected, people are going to be saying, “It’s just soooo 2006 ish.”:)

    It’s a near certainty ;)

    Also, note: We’ve got a working solution for the IE6 scaling issue now. Should have it built into the generator shortly. Will only affect the conditional comments.

  • http://www.sitepoint.com AlexW

    IE6 now scales up fine without breaking the layout. Update your conditional comments if you’ve already downloaded code.

    You do sacrifice some control over padding in your header text in IE though. Not sure whether there’s a solution to that.

    We’ve also got a downloadable zip to make things easier too.

  • dusoft

    what’s the point of new techniques to create rounded corners? there are plenty solutions already out there respecting both semantics and standards.

  • Lane Orcslayer

    Hey dusoft, if no one ever reinvented the wheel Hollywood would be outa business really quick.

    http://imdb.com/title/tt0426560/

    ’nuff said

  • http://www.sitepoint.com AlexW

    what’s the point of new techniques to create rounded corners? there are plenty solutions already out there respecting both semantics and standards.

    You didn’t point to examples, so I’ll have to second guess. The idea of any new technique would be to provide at least an alternative, if not a categorical improvement.

    IMHO using 3 or more DIVs to communicate ‘a single content area’ is startimg to stretch the idea of ‘clean semantic markup’. Ask yourself this: If your box was intended to be square-cornered, would you have wrapped the header in it’s own DIV?

    If ‘yes,‘, then, ok, I guess you could argue it’s semantic.

    If not, you’re admitting that the wrapper DIV is there to achieve a presentation effect.

    I haven’t seen one, but if you’re aware of another single DIV, stretching, JavaScript-free method, I’d be interested.

  • http://www.markbridgeman.com MarkB

    Heh, so would I :)

    While people still seek the perfect roundy-corner, then one will have to put up with not-exactly-perfect solutions.

    This one looks nice though.

  • Pingback: Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Spanky Corners 1.0

  • BulletProofPoet

    Cheers for this, guys – some very interesting techniques outlined here. I also see a blue line extending across the top of the top heading when the font size is increased in Firefox 1.5.0.2, but realise that this is still a beta.

    I need to have a play with the technique more, but I reckon it’s got a lot of potential. It’s just a shame about the name… the page gets filtered by our pornography filter in the office..!

    Keep up the great work folks! Much appreciated!

  • http://www.melvinwallerjr.com/ Finwesk

    It was a great thought and attempt. I liked your approach and use of CSS element nesting. However, when I tested an example from your creator it didn’t work form me with O, FF or IE.

    Your attempt was to use the barest minimum of in page coding for the effect, but might I suggest the addition of three in page elements to apply the design instead of your one element?

    The method I used applies two DIVs for the wrapper and one SPAN for the top or header element. It is fully scalable with any font size without breakage of the design. It does not use any hacks (CSS or Browser related), nor any recursive application of background images or colors that have to be recursively overridden to apply designs internal to the boxes.

    The result is a fairly simple application of decorative corners with minimal HTML coding, no use of hacks, uses fully scalable fonts, and does not interfere with or require adjustments from normal development practices. It also renders the same whether you declare HTML or XHTML.

    Rounded Corners

    Heading

    Lorem ipsum...

    Lorem ipsum...

  • http://www.melvinwallerjr.com/ Finwesk

    Well that was a wasted attpemt to show some sample code. The reply form strips out all of the code.

    Try this address to see my approach.
    http://melvinwallerjr.com/sample/rounded-corners/

  • http://www.sitepoint.com AlexW

    Thanks Finwesk.

    Not sure why you’re having trouble with Opera or FF unless they’re older versions. There’s nothing I’m aware of that should permanently prevent Spanky from working on those browsers — it’s likely a matter of finetuning.

    As for adding extra markup, my starting point is not adding any. There have been quite a few well-documented methods around for quite a while that take that approach. They work fine.

    As such, I personally believe the only really valuable step forward is a method that allows developers to deploy it without adding that custom markup. In other words, being able to take a stock WordPress, Mambo or DokuWiki install and roll out round corners across the site by editing the CSS only — and remove it just easily two years later.

  • http://www.calcResult.co.uk omnicity

    This is way too much effort and discussion for something that all of the Mozilla clients can already do, and is part of the CSS spec.
    When I want rounded corners I just drop in a border-radius declaration and there it is!

    Okay, so I have to back that up with -moz-border-radius for now, but that seems a small price to pay – the amount of HTML markup in this sort of hack is just ridiculous.

  • http://www.sitepoint.com AlexW

    Omnicity, I’m not sure if you actually read the documentation, but there is no extra HTML markup — it’s a heading and paragraph inside a DIV. The CSS is about 6 rules and obviously gets cached first time it’s downloaded.

    Secondly, ‘-moz-border-radius‘s’ not working anywhere outside of -moz might not be considered quite such a small price to pay by many developers. CSS specs have told us many glorious stories of wonderous lands over the years without ever necessarily helping us do the job. If you have a way of getting IE users to see -moz borders I’d be pretty impressed.

  • http://www.calcResult.co.uk omnicity

    Alex,
    I am fed up of reading articles such as this – I understand the basic mechanism perfectly, and that requires enough nested ‘boxes’ to be able to attach all four images to. That is always more than the singe DIV, list or paragraph that can be done with pure CSS, and which allows me to re-arrange the HTML however I wish – this design can very easily get broken where teamwork is involved.

    Your argument about IE and CSS standards is a little warped, to my mind, as long as we continue to pander to its deficiencies, MS will continue to ignore the standards, and users will continue to use it. Show them both the ‘right way’ and we might get somewhere.
    Are you also going to castigate me for using drop-shadows that are only visible in Safari? Or are you going to work up a big horrible hack to appease the uneducated masses? :¬)

  • http://www.biggerthed.prodigynet.co.uk biggerthed

    why waste all this time CSS still isnt up to the job, try adding borders! I still use tables for this affect (ohhhh slap my wrists) its twice as quick, the code is cleaner and its more stable across browsers.

  • http://www.sitepoint.com Matthew Magain

    I understand the basic mechanism perfectly, and that requires enough nested ‘boxes’ to be able to attach all four images to

    Omnicity have you even read Alex’s article at all? Really? Or are you just shooting from the mouth? It’s a single div. One. Yes, really. Go look before jumping into the discussion. Sheesh.

    Your argument about IE and CSS standards is a little warped

    I’m sorry, but your own “solution” to have your rounded corners appear only in Mozilla is laughable. Apart from the fact that they’re not anti-aliased so don’t look half as good anyway, how many clients have you been able to convince that it is an acceptable solution that only a minority of their visitors can view a site’s intended design? It might be fine for your own hobby sites, but try that stunt in the real world and you’ll be out of business quick smart.

  • http://www.sitepoint.com Matthew Magain

    I still use tables for this affect (ohhhh slap my wrists) its twice as quick, the code is cleaner and its more stable across browsers

    I’d be keen to see your HTML biggerthed, to see if it is cleaner than Alex’s single div with a heading and a paragraph. Do you have an example?

    Btw, I’ll race you: you go build your tables, and I’ll hit the “Spank Me” button. We’ll see who wins…

  • http://www.calcResult.co.uk omnicity

    Calm down Matthew, this is meant to be a professional discussion board; both of your last two posts are bordering on the offensive.

    Both biggerthed and I have introduced alternative views that are relevant to this article – I think most people would prefer technical responses? Incidentally, I notice that your second post contradicts your first – does this use a

    single div with a heading and a paragraph

    or does it use

    a single div. One. Yes, really.

    Perhaps you would like to get your own facts straight before you shoot your own mouth off?

    On a technical note, have you ever tried to get your corners to nest? border-radius does that naturally, and gracefully. Why Mozilla doesn’t use the correct CSS declaration is beyond me, but is much lighter-weight than any image-based hack.

  • http://www.sitepoint.com Matthew Magain

    I notice that your second post contradicts your first

    Not at all. As I said, this technique uses a single div, as compared to many other techniques which use more than one div element to unnecessarily sub-divide the page (commonly referred to as “div-itis”). If you’re suggesting that the heading and paragraph elements inside the div are unnecessary clutter and purely there for presentational purposes, then I’d be interested in hearing how else you suggest that the content of the div be marked up. Putting plain text inside your div without containing it in something seems somewhat nonsensical.

    I am fed up of reading articles such as this

    Apologies if you thought my response was a little brusk, but I guess “offensive” is in the eye of the beholder. Some would take comments like this to be equally provoking. Alex is too much of a gentleman to shoot from the hip, whereas I on the other hand feel passionately enough about this topic to address criticism that I think is not backed up with sound logic. Spanky Corners is certainly not the most robust technique for producing this silly little fad of a rounded corner effect. But it is the most semantically correct that I’m aware of (that doesn’t use JavaScript), it is quick to implement, it does work across all modern browsers (not just Mozilla) and does scale reasonably well with font size changes (although you may have to tinker with the values that the generator creates sometimes).

    I’m happy to discuss valid criticisms (e.g. requiring your CSS to be easily readable by a team of people, or not wanting to use conditional comments, or robustness in scaling to greater than 200%, or needing to support older browsers) but a suggestion that using Mozilla’s -moz CSS rules is a better solution is just not applicable to real word web developers. And a suggestion that using tables is more lightweight is a moot point if you consider that the images and style sheet get cached with every subsequent visit.

    As for adding borders, it is doable (stay tuned). And as for nesting, that is definitely an issue due to the nature of overlapping elements to achieve the effect. You might be able to get it to work if you had a paragraph above and below the nested div, but unless that is how your document is marked up anyway, you’re starting to introduce presentational elements and are probably better off using a different method.

  • Jon

    This is some pretty cool CSS!

    I’m curious about the other javascript solutions out there — does anyone have an specific recommendations for the best? I’m interested in comparing with the CSS only solution. Unless there’s something notably better, I think CSS only is the one me.

  • http://www.sitepoint.com AlexW

    I’m curious about the other javascript solutions out there—does anyone have an specific recommendations for the best?

    Jon, Alessandro Fulciniti’s Nifty Corners is often cited, and before that Simon’s Rounded Corners with JavaScript.

    Both methods take perfect markup, and then use JavaScript to build extra markup into the layout after the page loads.

    They are both great methods, but if people have any issues they tend to be:

    1) The corners don’t appear till the page is finished loading, sometimes giving a bit of a visual jolt when they do arrive.

    2) Some people argue that non-semantic markup is non-semantic markup whether you send it that way, or build it with JS.

    Other have argued that the fact the corners won’t appear in non-JS enabled sites is an issue, but in my view that’s a feature. It’s very likely that a user with a non-JS enabled device either can’t see the effect (Lynx text browser, screen-reader), or doesn’t care about the effect because of bandwidth restrictions (PDAs, phone browsers, dialup users with JS turned off).

    As with all methods, it’s all horses-for-courses, and Spanky is just another horse.

  • scattermachine

    Very nice – and the price is right! I also liked some of your off-the-shelf color schemes… H2Oh, especially.

    When this bad boy gets out of beta, I might use it for clients that want rounded corners. Personally, I prefer the old, square corners because they have a sharp, crisp look to my eye. But that’s just me and everyone’s got their own asthetic feel.

    I think the guys at SitePoint deserve credit for what they are providing here… for free.

    Especially since they’re trying to do it in a way that works in modern browsers – a difficult task, as many would agree.

    For those who need to vent, why not do something constructive, like contact the members of the W3C who don’t follow their own recommendations? I bet they’ll give good technical explanations, like the SP team did here. Or not.

    What else? Oh, yeah…

    Off-topic: How do those blog-looking entries that refer to this one get posted here?

  • http://www.sitepoint.com Matthew Magain

    Hi scattermachine. Ping the trackbacks link (at the bottom of the blog post, before the comments) when you publish your blog post to leave a trackback.

  • http://www.dannyfoo.com/minifolio/ dannyFoo

    I’m unsure if anyone has noticed this but I’ll just put it here anyway.

    When text size is made to the Largest or the Smallest, the graphic breaks. You’ll notice ‘bleeding’ at the top.

    Cheers.

  • http://www.sitepoint.com AlexW

    When text size is made to the Largest or the Smallest, the graphic breaks. You’ll notice ‘bleeding’ at the top.

    Which browser, Danny? I’m guessing you’re talking about IE6, but I just re-checked it and it seems fine.

  • Rasa Design Studio

    Hmm. On Mac 9.2.2 using IE 5.5 (not the same as Windows IE 5.5) it is also broken in several areas.

    — Sean Rice
    Rasa Design Studio
    http://www.rasadesign.com

  • http://www.solas.cc MCsolas

    nifty and spanky. 2 top notch choices.

    Rethinking some designs now ..

  • John

    Why not just use this.. cross-browser and so easy?

    Nifty Corners: HTML CSS rounded corners

    body{padding: 20px;background-color: #FFF;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}

    h1,h2,p{margin: 0 10px}
    h1{font-size: 250%;color: #FFF}
    h2{font-size: 200%;color: #f0f0f0}
    p{padding-bottom:1em}
    h2{padding-top: 0.3em}
    div#nifty{ margin: 0 10%;background: #9BD1FA}

    b.rtop, b.rbottom{display:block;background: #FFF}
    b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
    b.r1{margin: 0 5px}
    b.r2{margin: 0 3px}
    b.r3{margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}


    rounded corners test!

  • http://www.gl3nnx.net gl3nnx

    nice article!

  • http://www.sitepoint.com Matthew Magain

    John: the CSS you’ve posted doesn’t correspond to semantic markup. Go read Alex’s original blog post about Spiffy Corners, which is what sparked this whole debate and the effort that resulted in Spanky.

  • michael

    tested your code and it displays awful in my ie. i am lazy so i “spanked” the poppy link. let aside the color (i expected red for poppy), the rounded corners do not line up i.e. the top header seems sunken in the text below. i made a screen capture to show you what i mean but unfortunately you do not provide for image attachment

  • israelisassi

    It’s a great idea.. The tool does have a problem. The top left and top right corners don’t work properly with certain color combinations including a background color of 111111 with a foreground color of 12345c. I have only tested it with IE6 at this point.

  • cindypsych

    Um, I must be missing something here. When I look at the Spanky Corners with IE 6 the upper left-hand rounded corners are a lighter color than the rest of the box. It looks fine in Firefox and Opera. I thought it was fixed in IE 6?

  • Chris Conn

    I ran the “Spank Me” on IE 6.0.2900.2180.xpsp_sp2 on WinXP.
    When I did, I only changed the corner radius to be 50, and the top corners both get horizontal straight lines in from each side before the rounded edge from the image.
    Here’s where I went (correct me if this is wrong): http://tools.sitepoint.com/spanky/index.php

  • OldCoder

    Hi Rounder Team,

    Code does not work in IE6. There is a procedural issue. Get the zipped files. Extract them to your machine and run them untouched using FireFox or Opera or not IE6. If this works, then try IE6. This worked for me. Then copy to your working directories and get to work by changing the url’s. This did not work because of a couple of typos. After repairing and validating html and css and fixing warnings, all worked just fine in IE6 and FireFox.

    So before you rant about the code not working, verify your procedure for stealing the code in the first place. Then if you can see a better way, let the troops know.

    Don’t forget to say thank you for all of their work even if it does not work for you.

  • http://www.sitepoint.com AlexW

    Thanks OldCoder,

    Any idea why running the code in FF first would be making a difference?

    @Chris Conn: Correct, at very large corner radii the the outside edge starts trimming in IE — larger than 40px from memory. Pumping up the line-height in IE will fix it, but scaling becomes an issue again.

    @Cindy: Fixed. That was a site-only bug. Wouldn’t have any affected your code.

  • israelisassi

    Hi OldCoder: I’m assuming your post was related to my comments in some way. My intention was not to rant and I don’t believe anyone else was either.

    I saw the same problems as the two messages that followed mine. Since the bulk of the planet is using IE I won’t consider a product if it doesn’t work well there. I am glad and thankful that someone is working on this. I’m not here to steal anything, especially if it’s being given away. If I knew a solution to the problems I would have offered it up without hesitation.

    I understand your comments about testing/fixing in FF first. I find that sometimes I spend less time fixing if I start there as well.

  • http://www.sitepoint.com AlexW

    It’s all cool, israelisassi. I don’t think anyone’s trying to genuinely tell any else off.

    I’m a bit at a loss as to the issue you raise though. I’m not sure how some colors combos can work and others not. Any chance of a screen cap?

  • Chris Conn

    @Chris Conn: Correct, at very large corner radii the the outside edge starts trimming in IE—larger than 40px from memory. Pumping up the line-height in IE will fix it, but scaling becomes an issue again.

    Not that my opinion is worth much, but why isn’t the definition of the CSS style “background” made to simply accept more than one image specification?
    After all, if it did then we could easily and simply change the stylesheet to something like this:

    div.rounded {
    background: #77aa34 url(bl_10_77aa34_f6f6ff.gif) no-repeat bottom left url(br_10_77aa34_f6f6ff.gif) no-repeat bottom right url(tlc_10_77aa34_f6f6ff.gif) no-repeat top left url(tr_10_77aa34_f6f6ff.gif) no-repeat top right;
    color: #333333;
    position: relative;
    padding: 10px;
    margin: 0;
    height:auto;
    }

    You’ll notice that the quad specification can be duplicated, and after all Adobe Photoshop, GIMP and others allow a layer to be on top of another even if the layer on top is covering the other areas that you may want to see. Kind of left up to the user if you will. What I’m suggesting is leaving it up to the coder.

    In the above CSS I have a zero margin, but a flat 10px padding. The background should be allowed to extend past the padding (in my world :) ). Thereby allowing the text and any actualy images or other HTML to be contained within the padded area.

  • israelisassi

    AlexW: It’s working now. I believe it was corrected since it’s not doing it now. The symptom was the same as Chris Conn described in his post at

    May 12th, 2006 at 1:32 am
    I ran the “Spank Me” on IE 6.0.2900.2180.xpsp_sp2 on WinXP.
    When I did, I only changed the corner radius to be 50, and the top corners both get horizontal straight lines in from each side before the rounded edge from the image.

    In my case, it was only showing up in the tool and I had left the radius at the default of 18. The downloaded code worked well in that regard. All appears to be well now, and I’m a happy Geek :)

  • http://www.sitepoint.com Matthew Magain

    @Chris Conn: CSS3 has support for just that – multiple background images. Unfortunately Safari is the only browser that supports it at this point.

  • http://www.sitepoint.com AlexW

    Yep, one day in the not-too-distant future, that’s exactly how we’ll be doing it, Chris. In the meantime, we’re just working with what we’ve got.

    Ideally it would be great if all browsers decided to support the conditional comments syntax.

  • http://www.dynamicsitesolutions.com/ Kravvitz

    I tried placing a background-image on “div.rounded h4:first-letter” but found out that IE5.5/Win seems to ignore background-position on :first-letter. Therefore, this CSS only rounded corner solution doesn’t work in IE5.x/Win.

  • http://www.sitepoint.com Matthew Magain

    Yep, and that’s why it says so in the blog post…

  • Anonymous

    I struggled, about 10 days ago, to get Spanky Corners to work on all browsers, without success. I’m sure, in the last 10 days, with your new 1.0 version, that you may have sorted out many or most of those problems, but really one big problem remains with it, that I am surprised no one else has mentioned so far, which is that the corners are not properly rounded and at some radii look really quite amateurish. It should perhaps be called ‘Wonky Corners':-) Only the top left-hand corner is rendered correctly, while the other three are all incomplete 90 degree arcs, i.e are truncated so that the top-right and bottom left and right corners have a peculiar sharp edge at 3 o’clock and 6 o’clock on the arc, respectively.

    Exactly what’s going on can, of course, be seen in Photoshop. So here it is, in big close-up, with its shortcomings revealed.

    I don’t think this is really acceptable, and will be sticking with Nifty Corners for the time being.

  • GordonS

    Sorry, didnt mean to post that anonymously. Didn’t click the log-in button.

    Also, didn’t mean the link to look like that.

    It should look like this: Photoshop close-up

  • angray@beeb.net

    Very buggy on IE6

  • aurelien

    is there a way to imbricated a yellow rounded corner box in another rounded corner box but blue this one ?

  • http://www.sitepoint.com AlexW

    Exactly what’s going on can, of course, be seen in Photoshop. So here it is, in big close-up, with its shortcomings revealed.

    GordonS — there’s no reason you have to use our images. Obviously we’re generating the images programmatically and that works better at some radii than others. They’re useful for the demonstration purposes, and will do the job for a lot of situations, but a man like yourself who knows his way around Photoshop could no doubt produce a higher quality custom image for a given radius. I would do the same.

    is there a way to imbricated a yellow rounded corner box in another rounded corner box but blue this one ?

    aurelien, I haven’t tried it, but I can’t see why it wouldn’t be possible. You’d need to rewrite the code a bit.
    Instead of just a ’rounded’ class you would need an ‘outer_rounded’ and ‘inner_rounded’ — the background color for the inner DIV would be the foreground color of the outer.

  • GordonS

    Actually, Alex, that’s a very good point, because a good system would be to use the PHP Spanky Corners initially until the client was happy with the design (colors, radii etc), and then to make the perfect version of the images in Photoshop – simply by copying that top left corner and flipping/rotating it as necessary.

    I’ll have another look at it, in that respect. Just hope most of the bugs are now ironed out!

    Cheers, Gordon

  • Rooney

    Its OK but there are things that just cant be done with this approach.

    My script curvyCorners is a better solution I think. It enables you to specify different radiuses and the corners are full anti-aliased and also can cover graphical backgrounds.

    Spanky Corners uses images, and only works with solid background and foreground colours.

    The next version of curvyCorners will also let you have a graphical foreground image for you DIV.

  • Joe in Redmond

    Nice article on Spanky rounded corners. I wish that I could use it but I did not see any link on this page to any code so I could use it!

    http://tools.sitepoint.com/spanky/

  • Anonymous

    When I view the Spanky corners as soon as I roll over any link the page paragraph expands downwards leaving a large gap of many empty lines. I am using Firefox 1.5.0.3 on windows xp. See here for screen grab of the problem. Whats up!

  • http://www.sitepoint.com Matthew Magain

    Hi Anon. I have the same setup and can’t reproduce that. However, I will say that it should be an issue that is related to the layout of the generator, and nothing to do with the generated code that you would use yourself.

  • http://www.sitepoint.com AlexW

    Its OK but there are things that just cant be done with this approach.

    My script curvyCorners is a better solution I think. It enables you to specify different radiuses and the corners are full anti-aliased and also can cover graphical backgrounds.

    Spanky Corners uses images, and only works with solid background and foreground colours.

    The next version of curvyCorners will also let you have a graphical foreground image for you DIV.

    Hi Rooney,

    You’re quite right on the solid color call, although we have a version that does borders nicely.

    I must admit Curvy Corners is a very impressive piece of scripting and will certainly provide a great solution for many people.

    It is a pretty hefty chunk of code though, and I think there would be a lot of developers that might be reluctant to be running script of that size for a presentation effect — particularly if you already have another set of scripts you’re running onload, which is pretty likely these days.

    There’s also one point I’d like to make as more of a general comment. Sometime in the recent past, someone somewhere decided that ‘using background images for corners was bad ju-ju’. About that time it seems everyone else stroked their chins while nodding wisely, and it was annointed as fact.

    I’m not sure if there’s confusion with using inline IMG tags (like several early techniques advocated), or if it was just the ‘Gee Willikers, Superman!’ buzz that Alessandro’s technique generated at the time by nixing the images , but I think this is simply incorrect.

    Rounded corners are a purely presentational effect — as such they share exactly the same transient existence as the text color, font, the border thickness and the background texture . The idea is you should be able to disable the CSS and leave no evidence whatsoever that they ever existed. In short, the only technically correct place for any of these things to live is in the stylesheet — regardless of whether that be as a background image, a moz-border or in some future wonderland, maybe as generated Super SVG.

    Now people might get creative and bend some rules to make markup and javascript perform presentation tricks — that’s cool, I’ve got no issue at all with that — but as far as I see, this often quoted idea that ‘image based corners are a no-no‘ is just a fundamental nonsense.

  • anon

    i’m new to css – i have the css file saved as spanky.css. what do i do to make index.html use spanky.css?

  • http://www.dynamicsitesolutions.com/ Kravvitz
  • nomi

    I am having a weird issue with spanky corners. If I put a link on the heading tag, it crashes IE and the page only loads in FF partway. Not sure why.

  • Dren

    Hello,
    I’m having some problems. I’m trying to make a userbar type thing using this code. It is just a long bar with text as a menu displayed horizontally. For some reason I’m getting some weird results. For one, I can’t keep all the corners where they need to be. They seem to either dissapear or move! All I want to use as html is the following:


    Blah blah blah My menu blah blah blah

    Now I’ve modified the code so the heading css code is replaced by the span, but now my corners dissapear if I don’t have a

    inside the div class rounded.

    Why is this? How can I fix this?

    Thank you in advanced.

  • Pingback: » Sitios Utiles | Pura Persuasi

  • Pingback: otro blog m

  • Cláudio

    Hello,

    Spanky corners is a very amazing tool for quick start rounded corners.

    I wish contribute with one little correct.

    I have Firefox 1.5 and your code (spanky css) wasn’t correctly render on it.

    I discover that had to do with height of div.rounded and div.rounded *.
    So I changed ‘height: 100%’ and put ‘height: auto;’
    wich correct my render problem.

    Thanks

  • http://www.sitepoint.com AlexW

    Hello,

    Spanky corners is a very amazing tool for quick start rounded corners.

    I wish contribute with one little correct.

    I have Firefox 1.5 and your code (spanky css) wasn’t correctly render on it.

    I discover that had to do with height of div.rounded and div.rounded *.
    So I changed ‘height: 100%’ and put ‘height: auto;’
    wich correct my render problem.

    Thanks

    Thanks Claudio. Nice work.

  • http://www.sitepoint.com AlexW

    Now I’ve modified the code so the heading css code is replaced by the span, but now my corners dissapear if I don’t have a

    inside the div class rounded.

    Why is this? How can I fix this?

    Dren, sorry for the slow reply. I’ve been out of contact for a little while.

    Not siure if you worked this out, but SPAN is an ‘inline’ element, so it won’t stretch across the screen like the a block element will. You would need to set your span to ‘display:block‘ to get it to behave like your Heading.

  • Matt

    This works great for boxes without borders, but has anyone figured out a way to have rounded boxes with, say, a 1px solid black rule around them?

    Thanks,
    Matt

  • Tegou

    I have this working without IE Conditional Comments. If I change the Height from 100% to auto in Rounded.css. This works for me in Opera 9, IE6, and Firefox 1.5.0.4, and I can scale the fonts in IE. I’m using this right now on personal pages, and I can use all text sizes in IE’s view menu withou it breaking.

    My question: Is there anything wrong with not using the IE conditional statements?

    -TG

  • http://www.sitepoint.com AlexW

    @Matt: Yep, I do have a bordered version, but it’s not automated. It requires 1 large graphic (larger than your max box size) but other than that, it’s fine. I’ll see if I can get the example online.

    @Tegou: Short answer is we’d love to get rid of the CCs. I tried for a while, but couldn’t get consistency. If you’ve got a working example without CCs we’d love to have peek. If it works, we’d be happy to incorporate it into the generator and credit you for it.

  • Tegou

    Hi Alex,

    This is all I did. I changed the height from 100% to Auto in the rounded.css file created by the site’s spanky corners generator. I used a doctype of HTML 4.01 transitional, and I made sure I didn’t point to the rounded-ie.css file. I used H1 and H2 tags, with a radius of 22. This worked in IE 6, Opera 9 and Firefox 1.5.0.4.

    So there’s nothing to peek at, I made one css property change in two locations. IE then lets me use Largest to Smallest in the view menu, without breaking. Firefox let’s me scale up once before breaking, but that’s true with the original generated css as well. Opera scales up and down nicely as it usually does.

    I was glad to find this experiment in rounder corners, since the one out there with the multiple divs, reminds me of nesting tables several levels deep.

    So again I’m wondering if this is a “good” change, or if anyone knows a valid reason I should be using 100% instead of auto. For my purposes on divs with no borders this is working well, without the IE conditional comments.

    Thanks for something with which all of us can tinker,
    TG

    PS – is the generator’s code adding the filename extension .css twice?

  • CathyM

    Hi,

    I’ve tested the tool on my site, it looks quite good in FF and Opera, but in IE, can’t seem to get it to work, read the other post to see if I can make the adjustments, but I don’t seem to get it. Using rounded-ie.css, messed it up quite a bit, putting huge spaces between paragraphs, this worked out when I made the change from 100% to auto and used rounded.css. However, I am still left with two problems, the top left hand corner gif doesn’t line up, and it now reduces the other divs around it to its height, while putting border lines through the page.
    http://www.fibjonline.com/lccu/index3.php

    Any idea how to correct it will be grateful.

    CathyM

  • http://www.sitepoint.com AlexW

    Hi Cathy,

    Sorry for the slow reply. We’ve been doing a refit of the site.

    I had a look at your code and you had an unclosed DIV tag which would have caused some trouble. When you’ve got a lot of DIVs it can be hard determining which is closing which one, so when I’m developing I like to foloow each closing div tag with a little comment explaining where it belongs: Something like:
    ... </div> <!-- /#navbar -->

    I cleaned up your code a bit, so you’ll see what I mean — this will be a much better place to move forward from — not perfect, but a better base. ;)

    http://www.sitepoint.com/examples/cathym/

    Cheers,

    Alex

  • GregM

    I’m seeing some very strange behavior with IE6 (is that an oxymoron?). The code works great for me in Firefox 1.5.0.6 and Opera 9.01 under all conditions that I had problems with in IE. I had to play around with the height of the div.rounded * to 100% to get it to usually work in IE. I’m seeing the following odd behavior:

    1) If there aren’t too many lines of text in the box (including header) the box has nice rounded corners no matter what I do, eg. change font size, change screen resolution, etc. Right now I have 6 lines of text and the corners stay rounded. The first box I wanted to create had 35 lines of text in 2 paragraphs. If I preview the page with those 35 lines out of Macromedia it looks fine, but when I minimize IE then restore the window I lose the bottom right rounded corner and it goes back to being square.

    2) When I play around with my screen resolution I see funky things in IE. I normally have my screen resolution set to 1600 x 1200. If I reduce down to 1280 x 960 or even lower I get a squared off corner on the bottom right if my box is not fully viewable on the screen without having the scroll to the bottom of it. If the box is viewable without scrolling down then the corners stay rounded if I minimize and restore repeatedly.

    Any suggestions would be much appreciated.

  • http://www.sitepoint.com AlexW

    Greg, can you put it online where we can get a look at it?

  • GregM

    Alex, I figured it out. I had your code mixed in with mine and had missed some conflicting code in one of my own header properties that was causing the weird behavior. Thanks for the reply though.

  • Tony H

    Hi

    In IE6 at least, there is a horizontal bar in the top left corner if you start the header with a lower case character.

    With many designers using lower case chars for site names/logos, this could be problematic?

    I’m not a css hacker so don’t really have a fix – but I have just run into the problem…

    tony

  • Tegou

    No problems with lowercase letters on my system with IE 6, using h1 and h2 tags. I did remove rounded-ie.css from my page, and I set the height to Auto. My sample file has 5 rounded corner structures on the page 1 large one and four smaller, equally sized boxes. I tried several letters (just in case it was that specific) and haven’t noticed a problem. I even tested out IE 6 text size from smallest to largest, without a problem.

    FWIW,
    TeGou

  • http://www.sitepoint.com AlexW

    Tony, I must admit it’s not something I’ve thought about before, but yes, I guess it’s possible that it could be an issue. I know you said you’re not a CSS hacker, but you do have a separate IE stylesheet, so I would guess that tweaking the height in that would adjust the fit.

  • harl

    just a hint, but from my experiences with GIF images.. they are not lossless at all, despite there are descriptions on the net which tell otherwise. the way GIF saves ‘hotspotted'(focused/assembled) information by reducing the images colour depth to 8 bit, mostly also reduces overall colour quality. at least that’s what (most) programs do when converting/compressing images. even with raw data and high quality settings it still gets dithered. that’s GIF.
    personally, i don’t see and good in that. GIF only works well if the colour depth of the original image doesn’t exceed some value between 8 and 16 bit, depending on how many different colours the image actually includes and which of them are obviously distinguishable by the human eye.

    seen that way, at least some of the GIFs generated for ‘spanky corners’ are lossy as well, so i would advise against using GIF.

    if you’re unsure, try some random colours yourself (ex. my current favourite background: #0f1528 and foreground: #1a2237), setting the corner’s edge length to 60 (so it’s big enough to make the difference more apparent to the eye) and you’ll see the whole 60×60 corner having different colours than both the BODY’s and the DIV’s background.

    using PNG instead would solve that problem (it’s lossless and supports transparency as well). corners up to 20 or maybe 30 pixels edge length could even be BMP, as long as you don’t plan to add transparency (or antialiasing) to them.

  • http://www.sitepoint.com AlexW

    Thanks harl,

    Some interesting stuff there. I agree PNG are a better option in general. As much as anything, we wanted to provide some graphics that matched the CSS to make it easier to understand when you downloaded the zip. The graphics are quite usable, but being auto-generated, I tend to remake them get them just a little bit slicker.

  • Tim

    Why do you not use a child selector instead of a descendant and then overriding for 2+ descendants?

  • hellhound

    this is not working in ie8 beta, missing top left corner,

  • Osiris

    Excellent generator you got here for rounder corners!!

    I’ve used your code when generated, but changed the corner graphics and used PNG instead of GIF, as it produces much better quality rounded graphics.

    Still, excellent resource