CSS Design: Creating Custom Corners & Borders Part II

by Søren Madsen

56 Reader Comments

Back to the Article
  1. Presumably this is the sort of effect CSS3’s border-radius property is supposed the achieve?

    Copy & paste the code below to embed this comment.
  2. I love these two articles and have, in fact, created a number of designs already based on Part I of “Custom Corners”.  In Part II, especially, I still see a few tiny holes in IE6 (Windows XP Pro).  The example link for Step 2.4 introduces gaps above the footers in each column—small ones in the left and right and a large one across the whole center column—but only after the user scrolls the page content.  Resizing the browser, even by a pixel or two, makes the gaps disappear, but any scrolling brings them right back.

    Is there any end to the madness?!  (Kudos, by the way, to Madsen.  This is a fine article.  I think we’ll all be happier when these browser bugs are laid to rest.)

    Copy & paste the code below to embed this comment.
  3. Even stranger. I get them too (Win2k/IE6) but only when I scroll using my mouse wheel. If I use IE’s scrollbar, everything is fine.

    Those wacky IE developers!

    Copy & paste the code below to embed this comment.
  4. As I’ve demonstrated before, in the 1st part, this is the 99% exact replica of Step2.3 testcase, but using only one image, instead of slicing into 5 images, which seems unnecessary.
    http://phoenity.com/tests/custom_corners_one.html

    Copy & paste the code below to embed this comment.
  5. The background image for the main body doesnt seem to repeat to the full width of the table in 1600×1200 using Firefox 0.8.

    Cant quite see whats going on here though to fix it…

    Copy & paste the code below to embed this comment.
  6. RE: CSS3
    —-
    No. The keyword here is “custom” – not “round” :)

    RE: Customs Corners/Borders with only 1 image
    —-
    Yes – your approach makes sense for smaller sections, but the slicing prepares the technique for sections with “infinite” length, as demonstrated in the center-column in step 2.4

    RE: Slight problems in 1600×1200 res
    —-
    The background-image used for this article is only of a certain size, and therefore the layout looks like it’s “breaking” when viewed at very large resolutions. Use bigger images, or limit the possible size of the section.
    And by the way – how dare you accuse me of using tables for this? (throws glove!)
    ;)

    Copy & paste the code below to embed this comment.
  7. Søren Madsen wrote:
    Yes – your approach makes sense for smaller sections, but the slicing prepares the technique for sections with “infinite” length, as demonstrated in the center-column in step 2.4
    —-
    “infinite” length? I don’t understand. So far I know PNG/GIF are raster formats, not vectors, so they cannot get infinite width/height, right? Please correct me if I’m wrong.

    Copy & paste the code below to embed this comment.
  8. Chris E Boy; I am sure you ment to say DIV yeh??

    Søren; Im sure he didn’t mean any harm. No need for throwing gloves. Here is a stone. ;)

    Copy & paste the code below to embed this comment.
  9. CSS3 has border-image ;-)
    ( http://www.w3.org/TR/css3-border/#the-border-image-uri )

    Copy & paste the code below to embed this comment.
  10. http://www.vertexwerks.com/tests/sidebox/

    same principal

    Copy & paste the code below to embed this comment.
  11. Yes – part one of the article series was, which is also noted in the acknowledgement in said article, but not this one.
    This article demonstrates how to work with gradient/patterned backgrounds – something that the Trashbox example cannot do.

    Copy & paste the code below to embed this comment.
  12. Lim Chee Aun:

    “So far I know PNG/GIF are raster formats, not vectors, so they cannot get infinite width/height, right?”

    You are correct, but the “inifinite width/height” is referring to the potential sizes of the content box, not the images.

    Because this technique positions the corner images at the edges of the content box, repeating them where necessary, not stretching them, the content can be as large as required and you still have your images in place.

    Your single-image technique works perfectly well if you have a fixed size for your content box, but the 5-image technique is for fluid designs.

    Any clearer?

    Copy & paste the code below to embed this comment.
  13. Perhaps I missed it, or don’t understand the concept fully, but wouldn’t creating a GIF as large as some of the ones discussed here cause problems with page loading times and all?

    Also, I just want say thanks for all the great info here, from both the article authors and the other folks responding to them. I have learned more here than in any class or book!

    Thanks.

    Copy & paste the code below to embed this comment.
  14. I’ve been playing around with custom background borders for a while now, there are a number of different techniques to achieve similar effects. Here’s one of my quick experiments: Holepunched

    Copy & paste the code below to embed this comment.
  15. Yet another informative and useful article. Thank you Mr. Madsen and ALA. You make my life easier.

    Copy & paste the code below to embed this comment.
  16. I might just have to use this article to help me update my site.  I think that Jakob Nielsen might even have a graphically fancier site than me right now :)

    Copy & paste the code below to embed this comment.
  17. Shakey:
    “Because this technique positions the corner images at the edges of the content box, repeating them where necessary, not stretching them, the content can be as large as required and you still have your images in place.”

    I see.. div.ArticleLongContent and div.ArticleBody accumulate the changing/expanding height of the container, with the repeating background images.

    “Your single-image technique works perfectly well if you have a fixed size for your content box, but the 5-image technique is for fluid designs.”

    well, my testcase is fluid too. You can try it by resizing the font sizes. By the way, I’ve also created another testcase, 99% replica of step2.4, still using only 1 image:
    http://phoenity.com/tests/custom_corners_two.html

    Copy & paste the code below to embed this comment.
  18. I can’t seem to be able to figure out how to do that gradient background. Do I just apply the gradient bit (black->turquoise for example) and position it at the bottom, or am I just silly?

    Copy & paste the code below to embed this comment.
  19. The holes shown in IE6 are coming from what is known as the IE peekaboo bug (http://www.positioniseverything.net/explorer/peekaboo.html). A manifestation of that particular bug. The good news is that there is now a little fix for it. It will show on anyones IE6 browser with XP, granted. You just have to scroll with the mouse will slowly up and down… you’ll end up seeing the gap (look at the bottom).

    As to work with less images, you can with two, one holding the 4 corners and another one for the right-hand side shadow that will allow infinite length.

    I’m at work right now, but the moment I get home I will post a link with a sample of how to modify the CSS in the article for the peekaboo bug and the alternative 2 images CSS. Give me a few hours ;)

    Copy & paste the code below to embed this comment.
  20. “with the mouse will slowly up” should be “with the mouse wheel slowly up”. Sorry for that :)

    Copy & paste the code below to embed this comment.
  21. Can be found here – http://interface-7.net/20040218/

    Copy & paste the code below to embed this comment.
  22. I can select any line or paragraph of text, but I can’t seem to select, say, the title (“Middle”) and the paragraph below it.  Is there a way around this?  Is this a browser bug?

    Copy & paste the code below to embed this comment.
  23. A stretch/extend keyword would be infinitely useful in CSS.  Would make this and other techniques so much easier, and we’d get far more out of our bitmaps…

    Copy & paste the code below to embed this comment.
  24. As always, thanks for the great article.  I have a question, or could be a suggestion for part III of this series…

    Is it possible to have a gradient INSIDE the content box, instead of just an all white background and have it be vertically fluid without breaking the gradient?

     

    Copy & paste the code below to embed this comment.
  25. The one problem with this technique is that you have to make the top-left image almost ridiculously long, and even then it’s not always long enough (especially with text-resizing). Has anybody come up with a way that doesn’t require that?

    By the way, I’m very much aware of the technique where you have header and footer images, then vertically tile the content background, but that only works when the width of the box is fixed, not when it’s a relative value.

    Copy & paste the code below to embed this comment.
  26. I’ve created another testcase, to fix my previous technique with long containers, using only 2 images:
    http://phoenity.com/tests/custom_corners_three.html

    Copy & paste the code below to embed this comment.
  27. http://www.cubedonline.com/newdesign/index.html

    rounded effect done with two images (one with the headers; the other with a bottom aligned image in the container div).

    Copy & paste the code below to embed this comment.
  28. rounded effect done with two images (one with the headers; the other with a bottom aligned image in the container div).

    Yes, it is quite elementary when only worrying about fixed-width divs, however the end product of this article creates a 100% width design, with divs that vary in width depending on resolution.

    Good article by the way – I am also (somebody else mentioned it on here) wondering about the best way to have a nice gradient as a background image across different resolutions … I can’t quite get my head around it. ;)

    Copy & paste the code below to embed this comment.
  29. yeah, I forgot that…gee, I feel stupid. Anyway, I’ll start looking into ways to get gradients to work. I imagine it will take some crafty background hacks and tricks.

    Copy & paste the code below to embed this comment.
  30. your site is beautiful (saw it via cssvault.com)

    Copy & paste the code below to embed this comment.
  31. I love this approach but I can’t see myself use it for professional websites, yet. It doesn’t seem to be very reliable to me, when these bugs in IE get fixed (ok.. if ;)) I don’t want to re-do all websites I made.

    What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?

    Copy & paste the code below to embed this comment.
  32. Those 2 Articles have changed my life as a webdesigner a bit (well, in fact, ALA did). Those approaches to rounded corners are fine, still I developed another one to circumvent the inconvenience of either a giant topleft-image, and/or a box whose size is restricted to the background-images size.

    As was mentioned here before, this forces me to expand the structure to 10 elements (a container box, a left, middle and right box for the top, center, and bottom part), plus the inner markup.

    Although not so elegant in matters of markup and semantic, I now have real fluid boxes which can expand right up to mars. And transparency and dropshadows for png-supporting browsers…

    To find back to easy-to-understand markup, I throw the whole box-stuff into a little script, thus all I have to do is give my container an ID and invoke the script who will do the rest.
    (see it under development under www.d-ing.net – following pages)

    d. )

    Copy & paste the code below to embed this comment.
  33. well, that shouldn’t be too hard – just create the borders / corners with the transpareny inside nad the main container with the (must be huge) gradient…

    d. )

    Copy & paste the code below to embed this comment.
  34. Soren:
    “And by the way – how dare you accuse me of using tables for this? (throws glove!)
    ;)”

    Oops! I dont know why i said that. Just goes to show that 10:47am is far too early to be picking holes in people’s code :/

    of course i meant div… i’ll be using this article in the near future (probably in a fixed width kinda way), cheers Soren!

    Copy & paste the code below to embed this comment.
  35. Noticed this in div.Article h2

    I noticed that in ie (where else?) that without this line, the top of the image is clipped. Doesn’t show up in firefox (haven’t tested more).

    Tried replaceing the images with borders, and without the font-size, the top of the border doesn’t show.  Has anyone else seen this?

    Also setting the height of div.Article h2 to 1.3em does the trick.

    Copy & paste the code below to embed this comment.
  36. “What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?”

    Using CSS for layout doesn’t mean you have to use CSS hacks. As a matter of fact, I didn’t really see any hacks in the code shown in the article; it all seemed like sound CSS for the most part.

    Copy & paste the code below to embed this comment.
  37. I’ve put up a page with details about the holes showing up in IE at http://www.sonnd.com/ala/

    I didn’t get around to fixing it, but it shows what the problem is with IE.

    For whatever is worth, I find the problem to be small enough to be ignored, for this particular case. I’ve found other situations where the peekaboo bug does indeed hide relevant content.

    Having said all that, maybe it’s not the peekaboo bug that we are seeing here (or not only) ;)

    By the way, just in case I forgot to mention it before, great article!

    Copy & paste the code below to embed this comment.
  38. if you resize text while viewing the html version of the sample (http://www.alistapart.com/d/customcorners2/step2.4.html) it breaks (or at least in safari 1.2).

    Copy & paste the code below to embed this comment.
  39. so yeah, other people have noticed that, too.

    Copy & paste the code below to embed this comment.
  40. Well; again – it doesn’t really “break”. It’s the same as viewing these examples at very large resolutions; the back-images used aren’t big enough.
    So – if you want to make sure that it will not “break” (meaning that the images gets too small when viewers enlarge the specified font-size) ; make the background-images bigger.
    In the case of text-resizing; it’s the background-image placed bottom right that you would make higher than the one used in the article.

    Copy & paste the code below to embed this comment.
  41. Good, it’s fluid, round of applause?

    No it’s not infinate flexible as you say, the only truely flexible varient of this common technique is multiple nested <div>s.

    Soory if I’m burtsing your bubble, but every time I increse text-size, it bursts anyway!

    Copy & paste the code below to embed this comment.
  42. Good, it’s fluid, round of applause? No it’s not infinate flexible as you say

    Yes – the center-column at the specified font-size in step 5 has “infinite” length. Like I wrote – if you want to make sure that the fonts don’t overflow the background-images; make them bigger. I never ever wrote, nor said or meant, that this is infinite flexible in every direction.
    I have to ask – how much are you increasing font-size?

    Oh, and – why the indignation, mate?

    Copy & paste the code below to embed this comment.
  43. first of all, sorry I forgot to say ‘good work’, it’s just that personally, after I first read about using multiple backgrounds to make expanding tabs, any extension of that seemed obvious and I didn’t see the point in this extension article – but I was wrong it’s a good educational story.

    I thought you (may have been someone else) posted that the fluid-ness went on when it’s actually pretty easy to break.

    I’m on 1280 by 1024 @ 115dpi.
    IE6: breaks with just one text-size notch up.
    FireFox8: breaks with 2 whole notches.

    To use this technique you have to consider the effect of width on the height (when text re-flows to take more lines), in addition to screen resolutions and text-size.

    I think there must be a way using thin corner and side images and a repeat bg middle behind the content.

    Multiple background images on each element has been on my CSS wish list for ages.

    Oh and sorry again for the hasty sarcastic remark!

    Copy & paste the code below to embed this comment.
  44. And on the subject of multiple borders on a single element, I thought about trying to emulate this using CSS dynamically added content…

    The aim for maintenance purposes is to just have one element in the HTML, and add the multiple nested elements with the CSS content: ; property applied to style rules involving the ::before and ::after pseudo selectors.

    This could also be used to surround elements in other border yielding markup, but as the resulting document will actually have the extra elements in the document, it is not as good as having multiple backgrounds on a single element, or the CSS3 border-image stuff. As my idea, (if it works) has no extra markup in the HTML file, it has one important advantage – to change the technique or remove it in the future only requires changing the CSS!

    Copy & paste the code below to embed this comment.
  45. It is with great trepidation that I dare post anything…

    I’m incorporating more and more css in to my sites, but am still using gasp tables (mainly out of impatience). I’ve cribbed two techniques from ALA for this site’s redesign www.coffeeshopofhorrors.com and am thinking that I might be in over my head. I’ve already had to float the Suckerfish-ish drop downs right instead of left to get them to center more accurately (I don’t know why this seems to work better) and am noticing that my one-image corner div behaves strangely in IE Mac. Perhaps I’m just to green to get it.

    test page is here:
    www.westafer.com/b/csoh/csohNav1.html

    Any advice is greatly appreciated.

    Thanks.

    Copy & paste the code below to embed this comment.
  46. I have some troubles with the rounded corner in firefox. Somehow i can’t see the bottom-right corner.
    When using IE the corner does show but then i see the ‘peekaboo gap’. When i try to use the trick shown in the post made by Jose Fandos (http://www.sonnd.com/ala)the links in my footer won’t work anymore.

    Can anyone tell me what i’m doing wrong?

    my site is: http://mattijs.thq.nl/pivot/
    and it’s dutch but that won’t matter i think.

    Copy & paste the code below to embed this comment.
  47. You’ve placed the background-images in the wrong CSS selector (for the HTML you’ve got)

    Change your .entryfooter class to this:

    .entryfooter {
    color: #666;
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: normal;
    text-align:right;
    margin: 0px;
    padding: 6px 0px;
    clear: both;
    background: url(http://mattijs.thq.nl/pivot/css/bottomright.gif) bottom right no-repeat;
    position: relative;
    right: -14px;
    padding-right: 1em;
    }

    Copy & paste the code below to embed this comment.
  48. There is a gap in the background of the middle footer paragraph in Mozilla 1.6 as well. At a normal window size it is a very thin line above the text but if you bring the size down to that of, say, a PDA it becomes a big chunk. Might it be a code problem after all and not a IE bug? Also, when you get down to that sort of viewport resolution, long words can overflow their containers but this is a problem all fluid designers have to deal with.
    Thanks for the articles. I have been thinking about de-blocking my designs for some time but haven’t known where to start. Now I do.
    BTW Don’t try to print anything using Firexxxxfox. It’s a bad joke.

    Copy & paste the code below to embed this comment.
  49. I’m not entierly sure this works in all browsers/configurations/anything but I sat down and thought about the problem a little bit and came up with a solution that uses one image and four div’s. It’s a combination of image hacking and background techniques. Right now it lives on http://www.originalgangsters.com/box/. If this has been solved the same way before, please tell me.

    Copy & paste the code below to embed this comment.
  50. I’m putting two of these side by side to get a ‘pages in a book effect’. Try as I may, I can’t figure out how to get both ‘pages’ to be the same size and scroll overflow text in a page. Any insights would be largely appreciated. TY

    Copy & paste the code below to embed this comment.
  51. Can you make a custom corner print? isn’t the default in most browser set to print without background colors and images?

    Copy & paste the code below to embed this comment.
  52. This doesn’t seem to take into account a large display size.  My 1600×1200 monitor shows a gap between the end of the top left image and the right borders.  Perhapse just making that image bigger would help, but I don’t think that’s the best solution.

    This solution will definately work, though, for cells with a fixed width.

    Copy & paste the code below to embed this comment.
  53. Im working on this site and Im using this method to create a ouline around tables. It looks great in everything for mac, but IE on PC looks really messed up. Here is the url: http://www.designsequence.net/mead/index.php?id=people . The CSS file is here: http://www.designsequence.net/mead/mead_css.css . Anyone know how to fix this?

    Copy & paste the code below to embed this comment.
  54. I have noticed that if you add quite abit of text in the Article box then it seem to break at the bottom ????.

    Cant See why

    Copy & paste the code below to embed this comment.
  55. its not really that great –
    i could work out wether it was a tutorial or not?
    could be good to be ‘custom’ border, not rounded

    Copy & paste the code below to embed this comment.
  56. Just like Dave said it’s fixed and can not be used in case of serious projects where you need to have dynamic width.

    Unfortunately adjusting the background size for a particular project is not the solution to go with, it’s a hack.

    Copy & paste the code below to embed this comment.