CSS Design: Creating Custom Corners & Borders

by Søren Madsen

96 Reader Comments

Back to the Article
  1. “Limited browser support was the best thing that ever happened to web design. It forced us to simplify.”

    If anything limited support caused more problems. People wanted MORE MORE MORE. And when MS attempted to give them all the bells and whistles while the standards bodies tried to put something more realistic together and NS sat on it’s hands. That’s why we have these hacks today is because one group had a vision of the web that was entirely contrary to how people really wanted to use it – aesthetics, art history, and good design principles aside.

    Copy & paste the code below to embed this comment.
  2. FWIW…Not quite as slick looking in IE 6. Some of the elements slide around a bit.

    Copy & paste the code below to embed this comment.
  3. I like this, but what if you are using a style for media=“print”? won’t the borders you add in media=“all” then show up in your print style sheet?

    i suppose you could specify no borders/backgrounds in your print style sheet.

    oops, i answered my own question. but i’ll post it anyhow in case anybody else has the same one.

    Thanks for the great trick.

    Copy & paste the code below to embed this comment.
  4. I worked with Ryan Thrash over a month ago
    on this method, and we discovered that Gecko
    often mars the corners effect under certain
    text/height conditions. It’s due to the “1px
    rounding error” that happens often in Gecko
    browsers.

    http://www.positioniseverything.net/round-error.html

    http://www.positioniseverything.net/gecko/mozshift.html

    I’d be very suprised if this problem has been
    negated here. It’s quite persistent. Ryan was unable to solve it, which didn’t suprise me.

    Copy & paste the code below to embed this comment.
  5. The Tanket Hack hide the Css to NS4, also if you import it with <link>

    Copy & paste the code below to embed this comment.
  6. Trying to line up the elements in a pixel perfect arrangement, would make the bug you mention, cause problems in Gecko based browsers.
    My solution was to make sure that the elements overlap with at least 1 px – and that seems to have “solved” it.

    Copy & paste the code below to embed this comment.
  7. I have to agree that I find the table solution to this problem simple and elegant. Moreover, I find the table solution perfectly logical and self-explanatory.

    Please, realize I am not trying to discount the CSS approach. There seems to be a push toward a logical usage of html tags such that table tags, for example, are only used to present tables of data. I cannot totally agree with this. I think a table is a logical solution to this problem. I know logically that the entire structure (border+content) must be presented as an invisible grid. In my mind, grid=table. Logically. When I see “div” I think of an amorphous division. This may be arguing semantics, but lets face it, div-table arguement at its root is largely semantic. Sure, sure. Screen readers, lynx, etc. Don’t forget, using tables doesn’t rule out CSS. You can always assign a class to the table tag, and there’s your easy CSS updating.

    Great article, but I really can do this in seconds flat with tables, whereas I would have to fiddle with divs for hours to ensure the positioning is correct across various browsers.

    Copy & paste the code below to embed this comment.
  8. Great, works really well, but shouldn’t this be do-able without having to put empty article footer <div>s and s everywhere, just so they can serve as hooks on which to hang the bottom images of the box? My boxes/menus etc would not have author information at the bottom, so these tags are empty and only there for markup purposes. Aren’t we sposed to be getting away from that? Excellent stuff tho, I’m just being picky.

    Copy & paste the code below to embed this comment.
  9. I had no time to read all of the previous entries so i’ll just ask:
    can you make a css box that has corners that look like this?——> / and that would make the square box look more like an octagon (kinda like this—> /¯\)

    Copy & paste the code below to embed this comment.
  10. I’m going to have to concur that CSS, in its current phase, just isn’t up to the task when it concerns constructing interfaces laid out in graphical frames. Soren’s article, while creative, only reinforces the fact that CSS was developed by purists and not by designers (perhaps to keep people from mucking up logical structure rather than as an aid for designers). When you have to use placeholder paragraph and header tags just to position pieces of images; and some of the physical image sizes actually consume three times the bandwidth than a whole table solution, you know that there’s a problem. Throw in the monkey wrench that was so generously provided by Microsoft’s IE, and it seems self-defeating to utilize CSS if you require image based flexible layouts. We are all effectively applying the same workaround mentality with CSS that we have been using for HTML and this, of all things, was what CSS was suppose to have addressed.

    Until we are able to use multiple background images in a single div tag, rounded frames will continue to be a nuisance on pure CSS layouts. For the time being, the safest bet is to stick with tables in tandem with CSS for sites where puzzle-piecing image slices are required.

    Copy & paste the code below to embed this comment.
  11. Almost every designer seems to be kind of upset with Microsoft Internet Explorer because, although used by 94% of Internet users(could we call it the “majority”?), does not parse the CSS as dictated by whoever decide that CSS should make 94% comply with what the other 6% say is acceptable. I fail to see the logic of creating a standard which goes against the trend of the users. When I code a page I want the end-user to see my product and I little care about the Mozilla vs.Explorer with Opera as a referee! Could the W3C take into account the facts of life?

    Copy & paste the code below to embed this comment.
  12. What facts of life are those? Microsoft does not own the universe, and just because the current MS browser does not quite support standards they had as much of a chance as anyone else to put input into does not mean those standards are wrong, only that they are not currently supported by a browser that is used by a great many people, and is essentially only avalible for one operating system.

    Bugs are a fact of life in any code, but especially in anything as complex as IE. I may be wrong but I can’t think of anything recent and CSS-based where MS’s reaction was “go away—our way is better.”

    “The facts of life” are unless you never want the feature set of any browser to change at all, there will always be bugs in the browsers and they will not be consistant from one browser to another, and of course not one browser version to another.

    Copy & paste the code below to embed this comment.
  13. I do not remember saying that Microsoft own anything. The question I am asking is why ignore the majority of users when standards are made. And by the way MS reaction is exactly what Netscape used to have when they were the 300 pound “Godzilla” in the world of browsers. I only want to go about my coding business and be as efficient as possible and be able to have a page that renders with any browser without being plain vanilla text. I was so happy when I first heard about CSS and I dreamed that it would work with any browser. CSS 3 is on the horizon and my dream is still a dream. Yes, bug are a fact of life. So what? We try to feed them rather then debugging?

    Copy & paste the code below to embed this comment.
  14. if it only worked correctly on IE6!!!

    You guys are wasting a lot of time on this, as I did.  I spent several days trying to get this to work on IE6, but no dice.

    I have concluded that since it doesn’t work correctly on IE6, it’s pretty much useless.

    Nice idea, though.

    Copy & paste the code below to embed this comment.
  15. Thanks, this article was very helpful for me. I have always hated rounded corners but now I will only do round stuff ;)

    Copy & paste the code below to embed this comment.
  16. I had suggested the “Sliding Doors” tutorials to friend because they were mega-helpful.. and she forward this little guy to me.. thanks!

    Copy & paste the code below to embed this comment.
  17. These things seem to be gems, every single one of them.  The more I get into CSS (thanks to alistapart.com and sitepoint.com) the more upset I am with MSIE not being up to CSS standards.

    Copy & paste the code below to embed this comment.
  18. This technique works great for me.

    But one thing I can’t get to work—and I’m surprised no one mentioned it—is that if you try to put a right-aligned image in the body of the box, the box doesn’t grow vertically to accomidate the full size of the image.

    Any ideas how to fix this?
    -Hank

    Copy & paste the code below to embed this comment.
  19. I’m VERY new to CSS, 4 days, in fact.

    I’ve learned more on this site than any other about HTML, CSS and Webdesign.  I find the writing to be intelligent, informative and even a wee bit creative betimes.

    I will attempt to employ some of these techniques in me own pages, which shall remain unidentified for now.  (I’ve only 15 days of HTML thus far.)

    Five stars, Angus!!

    Happy Dae

    Copy & paste the code below to embed this comment.
  20. Very nice, however I’ve run into a nice problem, which a few other people seem to be having.  The nice I don’t have a footer everywhere so why just fill up space with the footer….

    http://rag.nu/New Folder/New Folder/test.html
    Looks good but for the huge space where $foot is… oh, and who said this was purely for rounded corners.

    Copy & paste the code below to embed this comment.
  21. Add me to the ALA’s Admirers group!

    great articles, even greater suggestions and ‘idea-generator’…

    My issue with the rounded corners stuff as presented here is that I either have to provide HUGE images to cover every possible window-size, or that I am forced to limit the box to a specific maximum height/width.

    Too bad you don’t make use of the browsers abilities to actually repeat backgnd images.

    Right now, I am tryin’ to get a fully fluid, indefinitely resizable rounded-corner-box (with 9 Backgnd images—which could be reduced to 3: the combined corners, top- and bottom edges, the right and left edges), and there seems to be quite some differences between MS and the rest of the world. (On my side, everything works flawless unless I touch the MS-Universe).

    But then, I even have difficulties to find myself a box of there to do the checklist.

    Once the cross-platform -Browser compatibility issues will be solved (if this is possible at all), I consider to create some script (thru innerhtml or somesuch) that will generate the extra html needed to render the boxes edges and corners, so that all I’ll have to throw into the page is the actual content, like, <div class=“my-boxed-stuff” id=“myfirstbox”>boxed</div>

    any help or hints/pointers are welcome, of course!

    best
    david. )

    Copy & paste the code below to embed this comment.
  22. Is anyone else getting a problem where andy imiges held inside the Articlebody box is not being displayed, is there a solution?

    Copy & paste the code below to embed this comment.
  23. I have tried your method using only 3 images for the boxes. Two of the boxes are also using an image replacement technique. I am also limited to using standard (for our company) classes and minimal ids. I got everything working finally in Safari, Mozilla,  ie5.2 mac and ie5.5 pc, except… once I adjusted for the pc, the content in two of my boxes become overlapped or disappear! Any suggestions are greatly appreciated.

    Copy & paste the code below to embed this comment.
  24. For those with high resolutions or designs simply wanting to keep image size down, what would you recommend doing about the possible and eventual break between the left and right corners?

    Copy & paste the code below to embed this comment.
  25. I had applied this article to create a web page, all work ok but in Internet Explorer the right border doesn’t show well, not appear as a continuous line.
    There are any method to solve this?
    Can view the problem on mi web:
    http://philips530.webcindario.com

    Copy & paste the code below to embed this comment.
  26. I wasn’t able to get the borders to work. The top left and bottom left over-lapped the right side. The footer “p” extended too far to the left out of the boxed area. How can I make this work and how can I make my own gif designs?

    Copy & paste the code below to embed this comment.