Mountaintop Corners

by Dan Cederholm

60 Reader Comments

Back to the Article
  1. 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.
  2. I would have to try this out.

    Copy & paste the code below to embed this comment.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. please mentally replace all <‘s with < and >‘s with > in the last post.

    Copy & paste the code below to embed this comment.
  9. hmm… :-)

    Copy & paste the code below to embed this comment.
  10. …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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. “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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. Very informative and insightful, just what I was looking for.  Thanks.

    Copy & paste the code below to embed this comment.
  30. 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.