Transparent custom corners and borders, version 2

It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. The technique is based on a combination of CSS and JavaScript, and gives you a lot of flexibility when creating rounded corners or special borders.

Well, it’s time for an update. I haven’t added any revolutionary new features to TCCB v2, but there are some bug fixes and a few new features. I’ve gone through the comments posted on my original article and tried to find solutions to the specific problems mentioned. The CSS and JavaScript have also been touched up a bit.

The changes, then:

  • The default CSS now auto-clears contained floats.
  • The JavaScript has been modernised and rewritten to use object literal notation, sometimes also referred to as JSON. Read Dustin Diaz’ JSON for the masses for a detailed explanation, and then read Jonathan Snook’s JSON is a subset of the Object Literal to understand the relation between JSON and object literals.

    The end result is that you can now plug the script in without worrying about conflicts with other scripts.

  • It is now possible to attach the script to any element type, not just div elements. Be aware that this could invalidate your markup. The script wraps the elements it finds in a div element, so if you attach it to, say, an a element inside a p element, the rendered HTML will be invalid (though W3C’s HTML Validator won’t notice since it doesn’t execute the script). To stay valid, only attach this script to elements that are allowed to have a div element as their immediate ancestor based on their location in the DOM, such as div, ul, form, and blockquote elements.
  • If the element the script is attached to has an id attribute, the attribute and its value is moved to the containing div element.
  • There should be no problems floating customised elements.
  • Nesting elements, floated or not, works fine except for in iCab, which lets contained floated boxes escape.
  • The default CSS contains a fix for IE whitespace issues that would appear under certain circumstances.

The TCCB v2 demo page contains several different examples, including one that shows how this technique can be used to create buttons with rounded corners and drop shadows with alpha transparency.

This technique works well in fully CSS-capable browsers, but there is one issue in Internet Explorer for Windows that I haven’t been able to find a perfect solution for. If you float or absolutely position a customised box, its width will not shrinkwrap to the width of its contents. All other browsers do that, but IE (including IE7) needs a specified width. That may be fine in some cases, but it can be very handy to let a float shrinkwrap. The demo page contains examples of both floated and absolutely positioned boxes, so check it out to see what I mean. If you can come up with a better workaround, please let me know.

The steps to use this technique are the same as in the previous version, so take a look at the original Transparent custom corners and borders article for the details. The basic idea is to first add the class name cbb to the elements you want to style:

  1. <div class="cbb">
  2. Box content
  3. </div>
  4. <ul class="cbb">
  5. <li>List item 1</li>
  6. </ul>

Then load the TCCB v2 JavaScript file:

  1. <script type="text/javascript" src="cb.js"></script>

Finally copy and adjust the CSS from the TCCB v2 demo page.

Use and abuse the CSS and JavaScript freely, but please create your own images. If you need some help creating good looking buttons, check out Veerle’s tutorial Creating flexible buttons using Photoshop shapes and styles.

Posted on September 25, 2006 in CSS, JavaScript

Comments

  1. Woefully inadequate words no doubt, but for what it’s worth all the same: thank you!

  2. Are there a reason for you had used the star hack (e.g. * html .bt div) on the CSS for IE served via Conditional Comments?

  3. September 25, 2006 by Roger Johansson (Author comment)

    sn: Glad you like it :-).

    Maujor: Yes, to hide those rules from IE 7. I added comments to the demo document to clarify that.

  4. Thanks Roger! Where are we going? IE are leading us to put hacks inside hacks.

  5. Resize window in IE cause visual bug.

  6. September 26, 2006 by Roger Johansson (Author comment)

    Nao: Oops. Fixed it, thanks to Emil Stenström’s post IE6 resize bug (position: relative becomes fixed).

    Thanks for letting me know!

  7. I’ve been using * html in combination with conditional comments a bit as well when only one or two of the rules are also required for IE7; the actual byte saving of not creating a conditional comment for IE7 and then another for everything else may not be that great, but I think it’s neater.

  8. Trackback: Transparent custom corners and borders

    Roger Johansson von 456 Berea Street hat seinen “Transparent custom corners and borders” ein Update verpasst. In erster Linie hat er seinen Nifty Corners Konkurenten von Grund auf aufgeräumt. Der Code entspricht jetzt…

  9. Very nice looking demo, and I can’t wait to get a chance to try it out on a site. Just need to persuade the designer to do something with fancy borders in now…

  10. Interesting… Thank you, Roger, I’ll have to test that and maybe use on one of my current projects which may need such borders :-)

    BTW, the star hack is working ok, but two conditional comments would do the same… one for IE 6 and one for IE 7, one below the other:) Things may change in the future in the IE world, one never knows… I was using various fixes and hacks before, but now seeing emerging IE 7 on the horizon, I think the CC are the best way to go, and the safest :)

    But I’m sure you’ve weighted all of the “pros” and “cons”…

    Good work! :-)

  11. Very nice update Roger!

    With regards to semantics, don’t you feel it’s a bit odd, to make a link look like a button?

    The user would expect a link to be a link, and a button to be … a button.

    Links point to resources, buttons change state.

    With the button element, you can still work your magic, and still retain some semantics.

  12. September 26, 2006 by Roger Johansson (Author comment)

    Matthew: Thanks!

    Michel: I see your point, but I am pretty confident that the * html hack will not be enabled in future versions of IE. It’s the only CSS hack I use, and normally only in a file loaded through conditional comments. So yeah, I thought of the pros and cons ;-).

    Morgan: Yes indeed, a button is a button and a link is a link. I used a link as an example since I find it very, very common for graphic designers to want links that look like buttons but behave like links, usability and user expectations be damned. I may change that.

  13. Thank you for this article.

    As a web GUI guy, I appreciate the flexibility this visually elegant approach provides. Additionally, since I like to use JavaScript to disable certain buttons after they have been clicked, I can see great usability advantages (for my target audience) to change the text and appearance of “SUBMIT” buttons.

    Be well and continue to do good work!

  14. Cool trick. But a lot of code to create a simple effect. I am waiting for the ‘background-size’ property that will come with CSS3. It will be somewhere around 2015 before I will be able to use that. ;)

    Until then, I use my ‘Wrapper Insertion Corners’ for creating rounded corners… http://www.openjs.com/scripts/rounded_corners/

  15. September 27, 2006 by Roger Johansson (Author comment)

    WebGyver: Thanks :-).

    Binny: Yes, multiple background images are a much simpler way of achieving the same effect: Custom borders with advanced CSS. AFAIK, only Safari supports that right now.

    Also note that this technique is not just for creating rounded corners - it allows you to create any shape corners and customised borders. It also lets you use alpha transparency.

  16. Many thanks for updating this.

    FYI, I wanted to use the script on a page that requires a number of window.onload events, so I took the addEvent function that you’re using out of the JSON structure & tried calling cbb.init() externally using addEvent(window, ‘load’, function(){cbb.init();});

    However, I found that while all is fine in ‘modern’ browsers (IE6+, Firefox, Safari, etc) the script now fails in IE 5.01 & 5.5.

    This might be due to my lack of understanding about JSON &/or scope, so I’m wondering why this might be?

  17. Hello !

    I am using your script with fckeditor, and when i apply the script, fck editor doesnt load and says “error loading fckeditorcode_gecko.js”.

    If y delete “div class=”cbb”“, fckeditor load normaly.

    have you an idea about this ?

    tanks :)

  18. September 28, 2006 by whiskey

    its pretty cool! as for the hacks, i have been doing this lately, first you design the css for firefox, then i use a double } at the end of the class or id i want to hack, IE 7 and Firefox (and i think opera too) won’t pickup the following declaration, where i just state a new value for the property i have to change. IE6 picks it up and applies it.

    Hope this helps somebody? Not too sure it will validate though.

  19. Very nice

    Now al we need is a tool that does al the calculation.

    Load in an image

    set guidelines for the image ( these will be used for the css calcualtions )

    press a button and the css is generated

    Mm come to think of it this could be done give me a few days to make something ;)

    Armand

  20. I’m really impressed with this technique, but I noticed the introduction of a lot of div’s in the example markup to pull of the effect. However, the previous version had very clean markup by comparison.

    Was I missing something or are the extra div’s necessary to avoid certain problems?

  21. September 29, 2006 by Roger Johansson (Author comment)

    DJ: Not sure why that would happen. I’ll try to find time to look at it.

    Xitag: I have never used fckeditor, so I don’t know how it could conflict with this script. Are you trying to load an editor instance inside a cbb box?

    whiskey: That won’t validate and sounds like a very unpredictable hack, so I would avoid it.

    Armand: A tool like that would be nice :-).

    Christian: This uses the same generated markup as the previous version. All those div elements are unfortunately necessary to pull this off if you need transparency. Are you perhaps thinking of the multiple background image demo (Safari only) I made?

  22. ->Are you trying to load an editor instance inside a cbb box?

    Yes that’s is. I have use the javascript methode, and now fckeditor load normaly in firefox.

    Thx for your script :)

  23. Hey Roger, thanks a bunch for sharing this (and updating it), I checked out several other solutions but yours is definitely one of the most flexible and light-weight.

    I have one suggestion for the script that came up during a recent project - if I have a bunch of rounded boxes on a page, I’ll use class names like “cbb box1” and “cbb box2” for eg. I give box1 and box2 different widths, which is fine when javascript is on. However when javascript is off, I might need to give them adjusted widths to make up for the ~10px image border that is no longer there, however I can only access the cbb class via CSS when JS is off. This is also important for the couple of seconds where the page has loaded but the script hasn’t yet run.

    What would be handy (and what I cobbled together with your previous script) is a call that looks for a class name “jsoff” and changes it to “json” when the script fires (along with cbb to cb). That way I coud do something like

    <div class="jsoff"><div class="cbb box1">this is my box</div></div>
    

    and access .jsoff .box1 {} and make adjustments as required. If this is outside the scope of your script I understand, but its a relatively small thing that can make life a bit easier :) Cheers!

  24. September 29, 2006 by Michaël Guitton

    Roger, you don’t actually need an anonymous function wrapper in your last JS statement:

    cbb.addEvent(window, 'load', function(){cbb.init();});
    

    This should work equally well:

    cbb.addEvent(window, 'load', cbb.init);
    
  25. September 29, 2006 by Roger Johansson (Author comment)

    Luke: Unless I’m misunderstanding you, what you are asking for is already there. The script changes the className “cbb” to “cb”, so style .cbb for browsers with JavaScript off.

    Michaël: Yes, the anonymous function is not needed. I was experimenting with sending arguments to the cbb() function and forgot to change that part after I scrapped the idea. Thanks for pointing it out.

  26. Actually, Roger, I was referring to your previous example. It used JS but the markup was very lean. Am I missing something or is this simply a different technique?

  27. Roger, sorry I probably didn’t explain myself very well. The script currently allows you to give all boxes a universal style when javscript is off via the “cbb” className, but when you have also given your boxes individual styles via another class name, eg box1, so you have class=”cbb box1”, you currently give different .box1 styles when javascript is off.

    However, with a parent className such as jsoff/json or script/noscript or whatever, it would be possible to change those styles via the parent className, eg .jsoff .box1 {}, giving more finely grained control in conjunction with the universal .cbb styles when javascript is off. For instance, ordinarily you might have .box1 {width:400px;} and then want .jsoff .box1 {width:380px;} to compensate for width differences sans borders.

    Hope that makes a bit more sense! :)

  28. Ok, I think I answered my own question. When I viewed the generated source code, I saw all kinds of div’s. But when I just looked at the regular source code, I saw a very clean markup. Got it now!

  29. Err, my comment above should read “you [cannot] currently give different .box1 styles..”, sorry.

  30. September 30, 2006 by Roger Johansson (Author comment)

    Luke: Ok, now I see what you mean. You can do that actually by using a selector like .cbb.box1 { }. Of course the problem with that is that it doesn’t work in IE. IE 7 may have support for multiple class selectors, but I wouldn’t be surprised if it doesn’t…

    Adding a wrapper element for this though… I’m not sure. I’ll try to come up with a better way.

    Christian: My next question was going to be if you had looked at the generated markup :-).

  31. Thanks Roger, would be interested to hear if you come up with anything. One quick idea I had as an alternative to introducing a wrapper might be to have the regex in the script replace all instances of cbb at the start of a string. That way it would be possible to give boxes classes such as “cbb cbb-box1” or “cbb cbbBigBox” which would become “cb cb-box1” and “cb cbBigBox” respectively when the script ran. That way it would be possible to set styles both globally and individually for all the appropriate boxes with JS on and off, with only a minimal adjustment to your script. Just a thought! :)

  32. Excellent article, I’m going to be using this for my project current project. It has a complex background colour so can’t use gif’s.

    Why not use PNG’s in IE by activating Explorers AlphaImageLoader filter? See this article for an example CSS Drop Shadows II

  33. October 3, 2006 by Daniele

    Hi Roger, i am using custom border in a layout based on yahoo grids and when i apply custom border on the main and secondary column layout breaks up. Applying CB on the secondary column <div class=”yui-b”> create custom header and footer out of column and apply column class,yui-b, to wrapper element breaking layout. How can i fix this? Adding an extra div container?

  34. Ok, ignore my PNG comment, I’ve played around with this now and you can’t position background images with the IE filter. I guess it would still be possible but you would need 8 seperate images. And I think the transparency of where the corners overlapped would show the horizontals and verticals through as well… back to the drawing board… but still an excellent article :)

  35. @Roger

    Well i have a tool and it does a lot of the calculation but i have an issue with the borders and the bottom corner

    can you check to see what im doing wrong

    http://www.gradabo.com/456.zip

    that way i can finsh the tool

  36. I know this might be out of context, but does anyone know why our beloved IE5/mac refuses to parse the javascript? Does it have anything to do with the JSON markup?

  37. October 5, 2006 by Michaël Guitton

    David: IE5/Mac does not refuse to parse object literals. It has something to to with the addEvent method Roger currently uses. You have two choices here: either use my cross-browser AddEvent implementation or the improved version by Dean Edwards.

    Roger: I wonder if adding 'display: inline-block;' for buttons would make them shrinkwrap in IE6 or lower (!?) BTW, Firefox doesn’t handle this property value, which is IMHO a shame.

  38. October 5, 2006 by Michaël Guitton

    Oops, you should read in comment #37 “It has something to do…”

  39. October 5, 2006 by Roger Johansson (Author comment)

    David, Michaël: The addEvent method I use does not support IE/Mac, so that is indeed why this script does not work there.

    Michaël: I tried display:inline-block, but unfortunately that does not make the buttons shrinkwrap in IE.

  40. Thanks michaël, ill look into those solutions. I know IE/mac is ridicilously deprecated, but it would be nice to get as wide support as possible.

    Roger, doesnt the fact that IE5 slipps the javascript make the line:

    .i3 {display:inline-block;}

    …unused, since it only forces IE5/mac to wrap it’s content? I might just be wrong here…

  41. October 6, 2006 by Roger Johansson (Author comment)

    David: The display:inline-block rule is still needed since it enables auto-clearing in IE 7. More on that in New clearing method needed for IE7?.

  42. Roger

    Well i have a tool and it does a lot of the calculation but i have an issue with the borders and the bottom corner

    can you check to see what im doing wrong

    http://www.gradabo.com/456.zip

    that way i can finsh the tool

  43. October 8, 2006 by Michael B.

    Great tutorial! Question, I’m new to using CSS, but if I have a print.css file that I want to load to create a custom version of my page for printing/mobile, how can I disable the whole CBB class from loading on each element?

  44. Small thing.

    Roger, are you sure that an li element is allowed to have a div as an immediate ancestor?

  45. October 10, 2006 by Roger Johansson (Author comment)

    Luke: Yes, that would be an option.

    Kam: As you have already noticed there are problems with that AlphaImageLoader filter, which is why I’m not using it.

    Daniele: I don’t know what yahoo grids is, so I’d have to look into that before being able to tell what is happening there.

    Armand: I haven’t had the time to take a closer look at your example. Trying…

    Michael B: No need to disable the JavaScript, you just need to avoid styling the generated elements in your print stylesheet. I’d suggest styling “cb” and “cbb” the same in that stylesheet to make the boxes look the same whether JavaScriot is available or not.

    Steve: Oh. Um yes you are correct, an li can only have an ul or ol as its immediate ancestor. Typo corrected. Thanks.

  46. Great work!

    After downloading and testing on a site I noticed that in IE, when serving the GIF images the shadow at the bottom of the box does not appear.

    Not sure if this is an image or layout problem. Have broken up the site so that you can see the box OK (top right hand corner). It works just fine in FireFox (shock!), but no bottom shadow in IE (bigger shock!).

    Would really apprecaite some advice on how to get the basic shadow working in IE.

    I will change the box styling to my own once I have the basics working.

    Many thanks!!

  47. If you like this technique of Roger’s, you may also be interested in my Seven C’s Border Technique. It allows you to have custom transparent borders and corners even when the corner curves are so large that the contained content has to be displayed within the bounding rectangle of the curve in order to look good.

  48. Nic: 12 days and no-one has answered you, so… You have to serve different images to IE6 and below. It does not support alpha transparency in PNGs. Hence GIFs are served with separate CSS and they would look terrible if they contained a “shadow”.

    This is done so that your images are independent of background colour. If you’re using the same background colour, put the colour into your GIFs and feel free to add a drop-shadow. However, the whole point of the alpha transparency is to avoid being locked into one solid background colour.

  49. November 30, 2006 by Joel Birch

    @Luke S. Rather than adding a containing div, could you not just put the jsoff/json class on the body element? Then you can target the element in CSS in the same way you did when using the added div except the “.jsoff” part of the selector in “.jsoff .box1” refers to the body element instead of the extra containing div.

  50. AMAZING, I LOVE YOU !!

    I have been trying for 3 weeks to have my rounded box site template for joomla working on both IE and Mozilla, but i didnt have any luck until today that i found this article.

    Really really thanks!

  51. in mozilla is good, but check this out in IE using this, i’m having an small problem at the corners and left/right side it doesnt look like your dem page =( w IE box:

    http://img356.imageshack.us/img356/8404/weirday3.png http://img340.imageshack.us/img340/1770/weird2tq4.png

    thanks for any help :)

  52. January 3, 2007 by Emin Akbulut

    With centered content container the box looks disturbed. For example, add below into your css:

    html {text-align:center;}

  53. January 6, 2007 by Richard Wallace

    This is a great solution and I plan on using it in an upcoming site. My only problem is that I want to absolutely position the boxes, so as you say,

    If you float or absolutely position a customised box, its width will not shrinkwrap to the width of its contents. All other browsers do that, but IE (including IE7) needs a specified width.

    I’m having to give it a specific width, which I hate. If you or anyone else find a solution to the shrinkwrap problem, that would pretty much make my year.

  54. Roger, first off, great script! While I like your execution, I’m not quite sure this is ready for everyday use. I’m running into the same limitation as Luke S - That being, defining widths for each content box stay consistent whether or not JavaScript is turned on. This is of course due to IE’s inability to handle multiple class selectors appropriately. I have tinkered with the CSS quite a bit without any luck. Has anyone found a solution for this problem?

  55. Really great..long searching for something effective like this. One question though:

    The javacript takes a while to load and therefore the layout of the page is “off” until it does. Is there anything to do about this so that the page is not displayed before loading completes?

    Thanks in advance :)

  56. Offically de-lurking here…

    I’ve been trying to figure out if there is a way to add text to the top border with this method. I’m not familiar with JS enough to figure out how to have it write content into the div elements that it creates. I’ve tried to mark this all up without the JS just to figure out how it’s put together, and I’m like 90% there but not quite! Hope this makes sense—I’d simply like to add text to the top border, like a title, etc. (without making it part of the image, of course)

    One side note: do you know of any way to see the actual markup the JS actually creates since you can’t view it in the page source? Thanks—for this and for all the other things I’ve learned on your site!

  57. January 19, 2007 by seanmca

    nevermind on the JS generated source question. Web Developer Firefox add-on, sweeeeeet….

  58. March 5, 2007 by vik

    I have two boxes like that How can i decrease the distance between 2 box! I think it too large! My image doesn’t as large as so!

  59. March 5, 2007 by vik

    I’m sorry! I can add image directly in previous post! Here is the image: http://img16.imagevenue.com/loc264/th_10804_distance_122_264lo.JPG

  60. March 6, 2007 by vik

    Sorry because i’m spamming but i find the solution: .cb {margin:0;} Admisnistrator please delete my two previous post! They are meaningless!

  61. March 7, 2007 by Steve

    I have a problem where Google adsense ads disappear from inside a .cbb box in Safari (its ok in FF etc). They show up for a moment while the page loads, then disappear once it’s rendered. Ideas?

  62. This script seems to cause a flicker (looks like a page reload) in IE 6/7 when form controls are used within a cbb box. Anyone else having this issue?

  63. We are using your script, but i dont know so much about it. I had a person inside the company which was using it before, but he quit. Is there somebody who can help us a little bit. It will be great.

  64. Hey mate, great scipt. I tried to use it but i get a windows error always now. Have you an idea why? How can i fix the error. Thank you just now for the answer. But good work. Stefan

  65. Hi Roger, thansk for the script you shared here. As well a good idea to make a demo page and let us see direct the demo. Thanks for your work. Great. Heiko

  66. April 3, 2007 by Dave M G

    Thank you for creating such a useful and easy to implement scripts. I have noticed that in IE7, the bottom left corner of a box created with this method does not display correctly. I have a box which has rounded corners that are PNGs with transparency. In the case of the bottom left corner, the image of the left side border of the box extends all the way to the bottom, and shows through from behind the corner image. This does not happen in FireFox, just IE7. I scanned this page for references to IE7 to see if this was an issue already discussed, but I’m not clear if any of the mentions about IE7 (eg, regarding “* html”) have any bearing on the effect I’m seeing. Is this an IE7 problem, and can it be worked around? Thank you for your time and help.

  67. April 19, 2007 by Örjan

    There a small but annoying problem with IE7 (safari, IE6 and FF works fine) see IE 7 left corner for more information.

    Do you have a solution for this problem?

  68. April 19, 2007 by Roger Johansson (Author comment)

    Dave, Örjan: I’ll have a look at the IE 7 problem ASAP.

  69. April 19, 2007 by Roger Johansson (Author comment)

    Ok… I had a look in IE 7, and at first I couldn’t see a problem. But then I tried zooming in on the page, and that caused the effect in Örjan’s screenshot. I have no idea if it is fixable, and I’m not sure it should be fixed. IE 7’s zoom feature is broken.

  70. May 10, 2007 by Ryan Hartman

    First, I love this i use it on almost every website i create, thank you.

    I had the idea of trying to combine your borders with Greybox.

    (http://orangoo.com/labs/GreyBox/)

    I’ve yet to have much luck as it seems a bit beyond my skills. Has anyone tried this yet? I think it would look really cool.

  71. Having a nightmare trying to get this to work. It was advocated in Budd, Moll & Collison’s excellent CSS Mastery (pub: Friends Of Ed).

    If you touch nothing it all works, just as it works in the book’s chapter download or as it does in the online demo here, though the placement of the added elements is off by a couple of pixels at bottom and right leading to less-than smooth corners.

    Changing paths to css, js or image files invariably seems to break it though, as happens here. Perhaps I’m not advanced enough to be allowed near this yet but it seems to me that while it is possible to make changes it’s far from easy. To someone without a very good grasp of what everything in the technique does.

    Clearly I’m doing something wrong but can’t find reference to the problems here or in the comments in the script/css. I hope Roger finds time to annotate the js and css more- what’s that 1 px border in the i3 for, etc? Is this detail explored elsewhere? Please direct me to a more expansive guide.

    I’m using the v2 of the js and v2 css fresh from 456beareastreet.com, looking at it (initial anyway) in Firefox 2.0.0.3

    Can I get a witness?

  72. May 31, 2007 by Roger Johansson (Author comment)

    tom:

    This technique has no problems related to directory structure. Something else must be going on.

    I had a quick look at your example, and it looks like some of the CSS rules have been changed. I also noticed you have an XML declaration after the Doctype. You can just get rid of the declaration - it doesn’t do any good there, and the document is perfectly valid anyway since the XML declaration is optional. Anyway, I don’t think that is what is causing your problem.

    The background declaration in your .bt rule has the positioning values in the wrong order - it should be 100% 0. That will take care of the breakage at the top of the box.

    To fix the misalignment at the bottom, change the values for .bb and .bb div to the following:

    .bb {
        height:17px;
        margin:0 0 0 18px;
        background:url(/box2.png) no-repeat 100% 100%;
    }
    .bb div {
        position:relative;
        left:-18px;
        width:18px;
        height:17px;
        background:url(/box2.png) no-repeat 0 100%;
        font-size:0;
        line-height:0;
    }
    

    The misalignment of the right border is - I think - caused by your border image not being correctly aligned. Try moving the right part of the image to the right.

  73. Hi Roger, Firstly, thanks for the great response and secondly profuse apologies for my errors.

    1) You were right about the misalignment of the right border, it was 1px out.

    2) The values in post 72 differ from those found elsewhere, see demo page for details. Having corrected these values the alignemnts are all spot on, lovely!

    3) The thing that really threw a spanner in the works was some file corruption. Sorry about that. I found that characters were present in code that I hadn’t touched that had no place being there. background:URL(… became background:0 URL(… removing the zero got the top element back. Maybe Dreamweaver weirdness, maybe bad unzipping, I may never find an answer to that one.

    Pathing issue- still going on but in light of that last paragraph I’m going get back to you on that after some serious research.

    Train to catch now, will post again when I know more.

    Thanks Roger, great help! :)

  74. Right, got it!

    Users of this technique may need to be aware that if you choose ‘preview in browser’ from Dreamweaver to test the pages you create using this technique it will appear to fail.

    The technique works.

    It is only testable though, in this context, from a live, online, environment. Whether you reference the linked .js and .css files using full or relative paths makes no difference. It’s just not testable unless it’s online. Here’s proof I got it to work plus some more words, should you be interested- demo page.

    If anyone’s in a position to confirm this (Dreamweaver MX ideally, for consistency) please post your findings here.

    As to the corrupt data problem… Sorted the last stray odd characters of corruption by pasting the whole page in to TextEdit (the plain text editor for Macs) removing the yen sign and upside-down question mark that appeared at the beginning of the code (did not show up in Dreamweaver window), than resaved file as UTF-8 with .css extension.

    Marvellous.

    Thanks Roger and I hope this post helps someone else out there get to grips with this fantastic technique.

  75. June 1, 2007 by Roger Johansson (Author comment)

    tom: Hey no problem. I’m happy I could help you fix the problems you were having. By the way, I just remembered that I wrote instructions on how to customise this in Customising custom corners and borders. Those instructions were written for a previous version but I think they should work with the version described in this article.

  76. June 3, 2007 by Jack

    Hi Roger, This is the best rounded corner coding I’ve seen. Personally I think getting the AlphaImageLoader working with this would be absolutely HUGE. I know it won’t repeat, but would it be possible to use long one-piece sides like you do the top and bottom? Thanks for making this code publicly available.

  77. June 10, 2007 by Jack

    I ran into one small issue. If the computed text-align: is center for the container, the left corners end up in the center in IE. I added text-align:left; /IE Fix/ to bt and bb to resolve the issue.

  78. June 11, 2007 by Michal

    How about this possible extension: I have found that for elements with padding that I want with rounded corners, I have have to manually “move” the padding from the original div, to the internal “i3” class via css. Is it possible to do this automatically via javascript?

    Michal.

  79. June 14, 2007 by rav

    Very easy to use, I’m impressed since I hardly ever was able to achieve this before! I have one question - rather than the box always matching the window - how can I set a minimum width so that it will not shrink any less than that? Cheers!

  80. June 16, 2007 by Roger Johansson (Author comment)

    rav: You can do that by using .cb {min-width:something;}. It doesn’t work in IE 6 though.

  81. June 16, 2007 by rav

    Thanks Roger, I have a suggestion which you or a reader may like to take up. In your demo pack you include the 2 .png files to create the border. It would be nice if someone made a pack of pre-made borders for those of us who are less skillful. Alternatively what about a program where you can upload a photo and have 2 appropriate images output. That would be very nice. Anyway - thanks for the tip above;)

  82. Nice idea Michal.

    For width and height enforcement in IE6, etc, try expressions (I’m no guru and I don’t have access to IE6 anymore so input and confirmation from others on this technique would be appreciated):

    Can’t get this post to go through with the code in it for some reason (have already checked my markdown syntax) so I’ll just provide this link to my page that shows, in it’s CSS, the expressions in use to impose min and max width. It’s quite simple. http://www.runninghead.com/links.html

    And the same technique goes for height obviously. Be aware that when editing your CSS using Dreamweaver MX the application may scramble non-standard CSS tricks like this! (then you have to re-write them manually). Good Luck all.

  83. July 13, 2007 by Yirkoon

    Hello, nice round corner method ! for your javascript I’ve recoded it to work with mootools 1.11. I’m not a coding guru but it seems to work nicely so I post it hoping it may be usefull to someone :

    var cbb = new Class({
        initialize : function() {
            $$('.cbb').each(function(el){
                //save content
                temp=el.innerHTML;
                //empty div
                el.empty();
                //change class from cbb to cb
                el.removeClass('cbb');
                el.addClass('cb');
                //inject bottom divs
                var bb= new Element('div').addClass('bb').injectTop(el);
                var bbd = new Element('div').injectInside(bb);
                //inject content divs
                var i1 = new Element ('div').addClass('i1').injectTop(el);
                var i2 = new Element ('div').addClass('i2').injectInside(i1);
                var i3 = new Element ('div').addClass('i3').injectInside(i2);
                //inject top divs
                var bt= new Element('div').addClass('bt').injectTop(el);
                var btd = new Element('div').injectInside(bt);
                //reinject content
                i3.setHTML(temp);
            });
        }
    });
    
  84. July 26, 2007 by halb

    Hey, nice work on the borders!

    But of course I have a request: how about being able to move the location of the text to be superimposed over a “border”?

    Say you’ve got a thick, shiny gradient border at the top and you’d like to get the title of the section to appear in that gradient.

    Normally, you’d use negative margins for something like this, but I couldn’t get anything to work without destroying the border layout.

  85. August 2, 2007 by Pauline

    First, this tutorial is useful for me. Thanks alot. But I face a problem with top left corner and bottom left corner when mixed with pull down menu on HTML. We assume the position of menu on top and the box under the menu. When mouseover on menu, top left corner always appear cover the menu, even z-index has been set up to 1 (both on CSS and javascript). Has anyone have a problem like me? And how to solve it? Thanks before.

  86. I have adapted version 2 with my own images. The problem is that I want my page wrapper to utilize different box/border images than the boxes floated inside the wrapper. I established a separate class that contextually applies to bb and bt selectors but when I apply that class to the wrapper box, the other boxes inherit the values.

    Let’s say the separate class for the wrapper images is “alternate,” I apply that class to the wrapper like this div class=”cbb alternate”

    Any suggestions would be greatly appreciated.

  87. I figured out the solution to my previously posted issue (86). The default box must apply to the outermost box within which custom boxes are contained and not the other way around. It’s a simple solution, I guess I just had to sleep on it order to figure that out.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.