Mountaintop Corners

by Dan Cederholm

60 Reader Comments

Back to the Article
  1. clever, i’ve always tried to do it the other way round, with the transparent pixels on the outside of the shape. However, your exmaples don’t allow for a background that may change colour/pattern if the user scrolls the page? they would just get ugly corners. But its still a good technique for use with solid backgrounds
    Copy & paste the code below to embed this comment.
  2. I think your final example image has the transparency inverted. The Mountain should be transparent, and the sky should be solid.
    Copy & paste the code below to embed this comment.
  3. This works great with definition lists, unordered lists with anchors in them, or anything else with more than one element. But, how can we maintain the semantic markup and round all 4 corners of a <div> box? I run into this problem often with containing boxes. Anyone?
    Copy & paste the code below to embed this comment.
  4. This technique bascially requires minimum of two block elements to position the top and bottom background images. So, this technique *must* have specific width (in pixels) apllied.
    Copy & paste the code below to embed this comment.
  5. Pete: you can either use Javascript, or you can wait for CSS 3. With Javascript you can build a script that finds divs with a certain class and dynamically add three more nested divs around that div using the DOM - these can then be used to apply background images to each corner in turn. This isn’t ideal, but it’s not really a huge upset if people without Javascript enabled browser don’t get to see a decorative part of your design and at least it keeps your underlying markup clean. CSS3 introduces the ::outside pseudo-element, which lets you apply as many background images(and other effects) to a single div as you like: http://blog.tom.me.uk/2003/07/14/looking_ahead_to_css3_part_1_the_outside_pseudoelement.php
    Copy & paste the code below to embed this comment.
  6. If you use PNGs, this technique has the potential for greatness in visual effects. No offense to Mr. Cederholm, but the lack of anti-aliasing in the images was extremely noticiable, especially in the last Everest background image. This has nothing to do with his image-manipulating capibilites, but with the GIF format’s 1-bit transparency problem. If you used PNGs, the mountain would have looked stunning.
    Of course, thanks to one major browser make (no names, of course), we can’t use transparent PNGs without some hackery. Yet. Michael Lovitt’s article anyone? These two techniques together would be great.
    Copy & paste the code below to embed this comment.
  7. Simon, could you (pretty please) make such a Javascript to achieve the effect that you described? I’ve also been struggling with giving content boxes four rounded corners, and if you could make that script, it’d make my life so much better. I’m sure it’d be a huge hit with hundreds of other CSS geeks too. :-)
    Copy & paste the code below to embed this comment.
  8. A very cool alternative to to Ryan Thrash’s ThrashBox.  It definitely has a place being used. Thanks
    Copy & paste the code below to embed this comment.
  9. Pete, I’ve run into the situation you describe. I think of the problem in terms of requiring a div to have 2 or more background images applied to it (and in your case 4). So essentially, I’ve used one div for each background element. And nested them. For the visual folks like me it looks something like this:
    <div class=“TopLeftCorner”>
    <div class=“TopRightCorner”>
      <div class=“BottomLeftCorner”>
      <div class=“BottomRightCorner”>
      Your content goes here.
      </div>
      </div>
    </div>
    </div>
    You position the background element of each corner to it’s respective corner of it’s div.
    It’s a big mess but it get’s the job done. Simon is describing a simlar solution above but using an automated process (javascipt) to generate all this code—if I understood it right.
    Thanks to A List Apart for an interesting article.
    Copy & paste the code below to embed this comment.
  10. A little offtopic question here, Is there something as semi-transparent images. I’ve seen them being used as backgrounds on Divs so as to get a translucent (partially visible)?
    Copy & paste the code below to embed this comment.
  11. look. I’ve heard of pngs giving levels of transparency but those guys were using gif images. (posted before completing)
    Copy & paste the code below to embed this comment.
  12. Corners and shapes is always interesting stuff.
    No need to limit it to images though. Recreating what looks like mos-corners can be done by adding divs on top and bottom of text-areas, giving them borders and adjusted margins and background, and trimming everything in place.
    Some of what this article shows might also be recreated without images. You can get CSS-controlled rounded corners and other shapes in a flexible design by using borders only, but the markup is ugly. Some javascript that could do the job would be much appreciated…
    Copy & paste the code below to embed this comment.
  13. Andrew had said (http://www.alistapart.com/discuss/mountaintop/#c7949): “I think your final example image has the transparency inverted. The Mountain should be transparent, and the sky should be solid.” No, actually that is the I had intended it—with the mountain (and corners) sharing the same color as the page’s background.  As if the mountain was growing into the box… or something.
    Copy & paste the code below to embed this comment.
  14. Very interesting, but how about those people surfing with slow connections & no graphics? I’ve taken an example and looked at it through Opera with no graphics, looks not like it should. Anyway, for future websites maybe connection speed is not as important as at present, what do you mean? CYa!
    Copy & paste the code below to embed this comment.
  15. Actually, it perfectly degrades when graphics are off.
    Copy & paste the code below to embed this comment.
  16. Sure would be nice if we could have n number of background images….each with their own positioning… Anyway, enough daydreaming…. This article seems a bit of a rehash of other techniques out there…Still doesn’t seem to be a clear, simple/elegant way of doing rounded corners in a cross browser implementation. Maybe boxes are better after all…
    Copy & paste the code below to embed this comment.
  17. I came up with some buttons that work and look great in just about everything but IE. http://www.westafer.com/b/scubaTests/buttonTest3.html I’ve been playing around with Dean Edward’s IE7 and it’s so very close, only thing is no matter what the fix, IE will not load a transparent image AND respect background. Obviously, Microsoft has no intention of supporting pngs, so tricks like the one described in this article will be necessary. I still have to wonder, what is Microsoft’s motivation to ignore the w3c? Oh right, world domination. Silly me.
    Copy & paste the code below to embed this comment.
  18. When creating images that rely on the background-color - always (as in “everytime”) remember to specify a color for the background too… even if it’s white. :-)
    Copy & paste the code below to embed this comment.
  19. ...
    Copy & paste the code below to embed this comment.
  20. http://annevankesteren.nl/test/javascript/corners.htm
    Copy & paste the code below to embed this comment.
  21. Why oh why oh didn’t W3 do rounded borders for CSS?  IE: border: round 3px; They covered just about everything else, why not do rounded?
    Copy & paste the code below to embed this comment.
  22. The obvious answer is that they did, in CSS-2: border-radius. A better answer is that “round” is not a valid border style, such as solid, dotted, or dashed. What’s the 3px in your example for? The width of the border or the radius of the curve? Therein lies the problem. I like this article and its target effect; the only problem lies with patterned backgrounds, as quoted before. Combination of this technique with use of background-position:fixed (and appropriate hackery for IE) could result in a solution to that issue.
    Copy & paste the code below to embed this comment.
  23. I admire your willingness to put another controversial technique for CSS rounded corners out there. I knew this ALA audience would jump all over it in one form or another. Fact of the matter is, it’s just another technique for adding rounded corners. And it’s a good one at that. It’s simple and innovative, and cuts down on image sizes. Thanks for writing and sharing it.
    Copy & paste the code below to embed this comment.
  24. Thanks Brad (above). After reading through 2 whole whiny pages of posts, its good to see someone appreciate the CSS demonstrated here by Dan. If most of you wanna bitch about articles like this one, then it is highly suggested that you actually write one yourself for submission.
    Copy & paste the code below to embed this comment.
  25. Here’s another interesting technique for creating rounded boxes: http://mrclay.org/web_design/rounded/
    Copy & paste the code below to embed this comment.
  26. I have seen the “rounder corner” effect done this way, and the way a few people have suggest (4 divs) before. This one was new to me: - http://creatimation.net/extra/mtil.htm Instead of using gif’s, it’s justing div’s with border left/rights to create the effect. This method scales better though since it isn’t locked into a pixel aspect.
    Copy & paste the code below to embed this comment.
  27. I’m new to CSS (i know “stone the newbie”... how, stupid, to attack new comers.) when people give alternative examples, a submission of the difference in code would be very appreciated - instructive as well. my two cents.
    Copy & paste the code below to embed this comment.
  28. I’ve used this before - its a pretty good technique, but it doesn’t really work with much bigger corners because they would need an images with translucent pixels, which require a matte iirc.  But that just means you’d probably want different images for vastly different colors, unless you were fine with the pixelated look. Nice article, though. :D
    Copy & paste the code below to embed this comment.
  29. Very informative article, I’ve been struggiling with diffrent methods for rounded corners etc for some ‘smooth’ navigation, It’s exaclty what was needed,
    Yet another ‘hack’ to add too the arsenal
    Copy & paste the code below to embed this comment.
  30. I have been using this method for months, didnt realise it wasnt documented its an awesome technique.
    Copy & paste the code below to embed this comment.
  31. This is probably the best technique I’ve seen for rounded corners so far.  The only problems I see are the fixed width and the fact that you can’t get fancy with the corner (no bevels or anything).
    Copy & paste the code below to embed this comment.
  32. I would have to try this out.
    Copy & paste the code below to embed this comment.
  33. nice idea, but unfortunately it only works with one color background and does not support gradient backgrounds as it is used here.. :(
    Copy & paste the code below to embed this comment.
  34. Hi! Nice article and a good technique, thanks! I have done some rounded boxes by using techniques I have found here and there, the markup is perhaps not as semantic as the one in this example and since I wanted bevels I had to settle for a non-generic solution ie I had to make new images for each background color, it works in most browsers though and the markup is not all that “dirty”. The example can be seen live at http://douglaz.com Thanks again for good articles!
    Copy & paste the code below to embed this comment.
  35. Here are two scripts, which allow for the display of transparent fore/background PNG images in IE 5.5+:
    http://homepage.mac.com/igstudio/design/css-js-dropshadow/sleights.js
    Refer to the evil empire website for the details on using “sizingMethod” attribute (scale, image, crop).
    You can also compact the two scripts together, since the detection method for “itsAllGood” variable is identical (I thought I did that, but apparently, I didn’t upload that file)
    Copy & paste the code below to embed this comment.
  36. This is an awesome article. Thanks for the great tip. I will definitely be using this.
    Copy & paste the code below to embed this comment.
  37. this is better than any nestled div method hands down, because the markup is clean. To get around fixed width problems, etc, I use every element I can. (ie, what about those <dd>‘s ?) or a menu <ul> with <li>s & <a>s, add a couple class or id specifiers and you have enough elements to work with if your clever and you carefully position and browser test. so, good article, i am sure it will spawn many a experiment.
    Copy & paste the code below to embed this comment.
  38. please mentally replace all <‘s with < and >‘s with > in the last post.
    Copy & paste the code below to embed this comment.
  39. hmm… :-)
    Copy & paste the code below to embed this comment.
  40. ...but why wouldn’t this work with gradient backgrounds? If the outside edges (creating the rounded look) are transparent, why wouldn’t the gradient background of the page show through? Am I missing something incredibly obvious?
    Copy & paste the code below to embed this comment.
  41. I can’t believe there are still people complaining about PNGs and IE. There are a few different ways to get IE to recognize the alpha channel.  Here’s one: http://youngpup.net/2003/sleightupdate
    Copy & paste the code below to embed this comment.
  42. I think this is a great method to achieving the rounded corners effect.  In the past I have just used different colored images for my corners, but as you can guess this gets pretty labor intensive when you want to change things up.  Thanks for this CSS tip, it is going to make my life so much easier!!!!!
    Copy & paste the code below to embed this comment.
  43. Dave: As Drew McLellan states on his website, Youngpup’s Sleight javascript code “only deals with inline images, not background images,” which is what we need in this case. Use this one instead:
    BGSleight - http://www.allinthehead.com/retro/69
    Copy & paste the code below to embed this comment.
  44. Hmm, we do something similar on our site (the homepage), but couldn’t get some of the elements to line up very well together cross browser. As a result we’ve used an extra image where we maybe didn’t have to… Reading this makes me want to go back and try again…
    Copy & paste the code below to embed this comment.
  45. “Am I missing something incredibly obvious?” Yes you are. The corners of the image used are NOT transparent. They are the same colour as the page background. It’s the bits BETWEEN the corners that are transparent to let the underlying background colour show through. This is why this technique is restricted to single colour background designs.
    Copy & paste the code below to embed this comment.
  46. Maybe i did something wrong but i can’t see the background and either the image in IE6. In Opera the images duplicated. Thanks
    Copy & paste the code below to embed this comment.
  47. Sorry for the off topic anwer but here is what I use to create 90% opacity. http://www.alistapart.com/discuss/mountaintop/1/#c7959 /* IE opacity */
    filter: progid:DXImageTransform.Microsoft.alpha(opacity=90,style=0);
    /* Mozilla */
    -moz-opacity: .9;
    /* Safari 1.1 */
    -khtml-opacity: .9;
    /* Safari 1.2 */
    opacity: .9;
    Copy & paste the code below to embed this comment.
  48. Dan, I liked your article but not being a web designer I made a pig’s ear of your beatiful CSS when redesigning my own website. http://www.xanadb.com yeah - go ahead and laugh.
    Copy & paste the code below to embed this comment.
  49. Actually, if you use quite some more you can skip the background images altogether, as long as you don’t mind not being able to put text in the top and bottom divs that define the roundness. Example using inline styles and ids just for reading convenience: <div id=“container”  >
    <div id=“top_2”  solid black; border-right:1px solid black;background-color:black;”><!——></div>
    <div id=“top_1”  solid black; border-right:1px solid black;background-color:silver;”><!——></div>
    <div id=“middle”  solid black; border-right:1px solid black; background-color:silver;”> A Simple Box </div>
    <div id=“bot_1”  solid black; border-right:1px solid black;background-color:silver;”><!——></div>
    <div id=“bot_2”  solid black; border-right:1px solid black;background-color:black;”><!——></div>
    </div> The container div only serves as a limiter, you can use whatever you want, the box will of course adapt to whatever width the parent container has. You can in fact use 3 colors:
    - the margin of course uses whatever color or background lies “underneath it”.
    - You use the border color to define an outline(like I did) or even a faux 3d button look
    - And of course the background-color of the middle div itself.
    Copy & paste the code below to embed this comment.
  50. I’ve used the code at: http://www.redmelon.net/tstme/4corners/ to produce rounded corners on divs. I liked this technique because of its simplicity and because it would not interfere with other markup in the page. I tried rolling my own first, but incompatibilities with IE5/Mac frustrated my efforts. There is also a well-documented example at: http://www.albin.net/CSS/roundedCorners/ If you want something a bit more fancy, try: http://www.vertexwerks.com/tests/sidebox/ which is based on an excellent article here: http://alistapart.com/articles/slidingdoors/  
    Copy & paste the code below to embed this comment.
  51. I used this technique a while back (almost 2 years ago now) on the UCE Business School website. Back then it was developed quite nicely, I thought, with ASP generated CSS files, and flash to make titles. Now, I’m in the middle of talks to get them to let me re-build the whole of the public-facing site in standards based markup. I’ll let you know how it goes!
    Copy & paste the code below to embed this comment.
  52. I used this technique a while back (almost 2 years ago now) on the UCE Business School (http://www.tbs.uce.ac.uk) website. Back then it was developed quite nicely, I thought, with ASP generated CSS files, and flash to make titles. Now, I’m in the middle of talks to get them to let me re-build the whole of the public-facing site in standards based markup. I’ll let you know how it goes!
    Copy & paste the code below to embed this comment.
  53. For fluid widths, try display: table-cell http://www.stilbuero.de/corners/rounded_corners.html Happy coding, Klaus
    Copy & paste the code below to embed this comment.
  54. Hi Dan, I’ve been playing with your mountaintop corners tutorial (fantastic BTW). I wanted to integrate your ideas from the tutorial into a site I’m working on but wanted to use <divs> rather than lists for the markup. With a bit of mucking around I came up with a modification. It’s just a single <span> for the bottom rounded box and it uses the ideas you had for the Fast Company icons (see http://www.simplebits.com/archives/2003/07/24/magic_icons_for_lazy_people_like_me.html) —creating a transparent box and then letting the CSS color fill the background, while the corners are white like the background of the page (or whatever your background color is—that way you can re-use code and only need one set of images.
    <style type=“text/css” media=“screen”> body {
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 0.9em;
    } /* Red Box
    ————————————————————————————————-*/ div#boxRed {
    width: 200px; /*width of the box and top image*/
    padding: 0;
    margin: 0;
    background-image: url(top.gif); /*image for the top of the box*/
    background-color: #FF0033;
    background-repeat: no-repeat;

    } div#boxRed span {
    width: 200px; /*width of the box and top image*/
    height: 6px;
    background-image: url(bottom.gif); /*image for the bottom of the box*/
    background-color: #FF0033;
    background-repeat: no-repeat;
    background-position: bottom left;
    display: block;
    /*line-height: 6px;*/
    } /* Gray Box
    ————————————————————————————————-*/ div#boxGray {
    width: 200px; /*width of the box and top image*/
    padding: 0;
    margin: 0;
    background-image: url(top.gif); /*image for the top of the box*/
    background-color: #CCCCCC;
    background-repeat: no-repeat;

    } div#boxGray span {
    width: 200px; /*width of the box and top image*/
    height: 6px;
    background-image: url(bottom.gif); /*image for the bottom of the box*/
    background-color: #CCCCCC;
    background-repeat: no-repeat;
    background-position: bottom left;
    display: block;
    }
    div#boxRed h2, div#boxGray h2 {
    font-size: 1.2em;
    padding: 3px 6px 0 6px;
    } div#boxRed p, div#boxGray p {
    padding: 0 6px 0 6px;
    }
    </style> <body> <div id=“boxRed”>
    <h2>Why Bank Online with North Shore Credit Union?</h2>
    Easy. It’s safe, secure and easy-to-use.
    <ul>
    <li>Learn More</li>
    <li>Login Now</li>
    </ul>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nunc, ullamcorper pharetra, tristique in, volutpat nec, massa. Sed aliquam. <!—THIS SPAN IS USED TO CREATE THE BOTTOM OF THE BOX—>
    <span> </span>
    </div> <div id=“boxGray”>
    <h2>Why Bank Online with North Shore Credit Union?</h2>
    Easy. It’s safe, secure and easy-to-use.
    <ul>
    <li>Learn More</li>
    <li>Login Now</li>
    </ul>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nunc, ullamcorper pharetra, tristique in, volutpat nec, massa. Sed aliquam. <!—THIS SPAN IS USED TO CREATE THE BOTTOM OF THE BOX—>
    <span> </span>
    </div> </body>
    </html>  
    Copy & paste the code below to embed this comment.
  55. I noticed one thing this misses. It seems to be dependent on the definiton list only having one term-definition pair.
    Copy & paste the code below to embed this comment.
  56. Yet another wicked article. I just found this site. I swear I haven’t found one thing that hasn’t been insightful as of yet.
    Copy & paste the code below to embed this comment.
  57. I want to use a more divided layout: 1.a split header with W-E title images, 2.a 3-column meta section with the NW, NE corner images at the edges and a potential secondary sidebar in the middle, 3.another 3-column section with a navbar on one side, a logo on the other side, and the main content in the middle, 4.another meta section with SW, SE images at the margins and some text in the middle, and 5.a split footer with contact information in each pane. I want to move from tables (one for each body section and one for the navbar) to divs and CSS.  I’ve seen many ideas for blank exterior div tricks, but what if you want your header/footer, navbar, and logo outside the main client area? BTW, I raytrace all of my web graphics with this free tool: http://www.povray.org It does require some math and practice, but even wacky web button styles can be built.
    Copy & paste the code below to embed this comment.
  58. This is a neat technique. I’m still pretty new with CSS, but no so with transparent rounded images. This could come in handy often, I like how the background images work in CSS…off to play now…
    Copy & paste the code below to embed this comment.
  59. Very informative and insightful, just what I was looking for.  Thanks.
    Copy & paste the code below to embed this comment.
  60. This certainly is not a beautiful implementation of the same idea, but I thought this audience might find it amusing what Windows/ASP.NET folks do when they want to create Rounded Corners… using… of course, non-semantic tables.
    http://aspnet.4guysfromrolla.com/articles/072804-1.aspx
    Copy & paste the code below to embed this comment.