CSS Design: Creating Custom Corners & Borders Part II

by Søren Madsen

56 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.