Mountaintop Corners

by
Published in CSS, Graphic Design

Either I’ve never bothered to try easier methods for creating rounded corners, or I am not afraid of having horrible eyesight in a mere five to eight years.  Regardless, one of my most oft-used little image creation tricks has to do with mountaintops: want that corner a little rounder? Just add another peak. This will begin to make sense in just a moment.

Article Continues Below
Article Continues Below

Figure 1
Figure 1

Consider Figure 1.  A boring, square box with a single pixel removed from each corner.  When viewed at 100%, the absence of that one pixel creates the illusion that the box is ever-so-slightly rounded. It’s one of those techniques that’s been used since TRON was cutting-edge.

Fewer pixels = more round#section2

You can take the illusion even further though, by removing more pixels and creating “mountaintops” (and you thought it was just a silly title).  Take a look at Figure 2 and you’ll see a zoomed-in view of a box corner, with several pixels removed to form a jagged, diagonal landscape. When viewed at 100%, the corner appears nicely rounded.

Figure 2
Figure 2

For lighter backgrounds, you can remove yet a few more pixels to create an even more rounded effect.  By creating a jagged diagonal as we had done previously and then removing one extra pixel at either end we can smooth the edge a bit (see Figure 3).  Anything with three mountaintops or more usually requires this extra pixel of space and works especially nicely with a light color that blends with the main page background.

Figure 3
Figure 3

Transparent peaks#section3

At this point, you may be saying “Dan, this is a stupidly simple technique.”  And it is. But the real value in using the pencil tool to shave off pixels when a rounded corner is desired (aside from the odd pleasure you might receive in doing so) is the combination of transparency and CSS to create boxes and borders that can change in size and color.

Because mountaintop corners utilize only two colors, we can set one of those colors as transparent, leaving the mountaintops the same color as the page background, thereby creating the rounded effect.

A flexible chameleon#section4

For example, let’s take an ordinary defintion list (<dl>) of items, and set a top and bottom background-image of transparent, rounded corners.  We can then assign a background-color with CSS and change the entire box’s appearance at will.

The semantic markup would look like this:


  
Mt. Everest

  
The tallest mountain in the world.

  
29,035 feet

You could, of course, use any structure you’d like, but the definition list structure gives us a pleasing number of elements to style with CSS.

Next, we’ll create a 240-pixel-wide image that will act as the top portion of the rounded box.  This image will be just tall enough to the contain white top corners at either end, while the rest will be transparent (where the background color that we’ll specify with CSS will show through).  Figure 4 shows a condensed and zoomed version of the image in order to show detail.

Figure 4
Figure 4 — Zoomed portions of top image

We’ll also create a similiar second image, flipped vertically for the bottom rounded corners.  The easiest way to do this in Photoshop is to choose Image › Rotate Canvas › Flip Canvas Vertical.

By assigning the top image as a background for the <dt> element, and the bottom image as a background for the entire <dl>, we’ll have a rounded box (fixed-width) that expands and contracts depending on the amount of content within — or if the user decides to bump up the text size.

dl {
  width: 240px;
  margin: 0 0 20px 20px;
  background: #999 url(box_bottom.gif)  »
  no-repeat bottom left;
  }dt {
  margin: 0;
  padding: 10px;
  background: #999 url(box_top.gif)  »
  no-repeat top left;
  }dd {
  margin: 0;
  padding: 10px;
  }

You’ll notice that I’ve used the shorthand method for specifying the background’s color along with its image for both the <dl> and <dt> elements. You’ll see why this has an advantage when we mix up the colors later on.

This example demonstrates the way that the CSS above sets the background images on either end of the box, while assigning a background color to shine through the transparent portions of the images.  I’ve also added some font styling and a decorative arrow image that sits to the left of each <dd> element.

Try increasing the text size for the example page to see how the boxes will expand and contract along with the text.

Climbing higher#section5

We can get even fancier by assigning differing background colors to the <dl> and <dt> elements.  This example shows how two different background colors with the addition of a white border-bottom for the <dt> element can be achieved from the same markup and images.

Additionally, we’re not limited to just rounded shapes.  As long as we stick to creating two-color GIFs, we can add any shape we’d like to the background images that flank the box. This final example shows how an alternate image is used for the bottom of the box, with the addition of a white mountaintop silhouette (see Figure 5).

Figure 5
Figure 5 — Alternate bottom image (zoomed) with mountain silhouette

Summary#section6

Because an element’s background-image sits on top of its background-color, we can use transparent GIF images that create the illusion of rounded or shaped corners and borders.  By keeping these decorative graphics within CSS, we can achieve flexible containers that can change color with the update of a single CSS rule.  Happy hiking.

About the Author

Dan Cederholm

Dan Cederholm is a designer, author, and speaker living in Salem, Massachusetts. He’s the Co-Founder of Dribbble, a community for designers, and Founder of SimpleBits, a tiny design studio. A long-time advocate of standards-based web design, Dan has worked with YouTube, Microsoft, Google, MTV, ESPN and others. He’s written several popular books about web design, and received a TechFellow award in early 2012. He’s currently an aspiring clawhammer banjoist and occasionally wears a baseball cap.

60 Reader Comments

  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

  2. I think your final example image has the transparency inverted. The Mountain should be transparent, and the sky should be solid.

  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

    box? I run into this problem often with containing boxes. Anyone?

  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.

  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

  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.

  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. 🙂

  8. A very cool alternative to to Ryan Thrash’s ThrashBox. It definitely has a place being used. Thanks

  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:

    Your content goes here.

    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.

  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)?

  11. look. I’ve heard of pngs giving levels of transparency but those guys were using gif images.

    (posted before completing)

  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…

  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!

  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…

  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.

  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. 🙂

  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?

  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.

  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.

  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.

  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.

  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.

  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. 😀

  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

  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).

  33. nice idea, but unfortunately it only works with one color background and does not support gradient backgrounds as it is used here.. 🙁

  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!

  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)

  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.

  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?

  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!!!!!

  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…

  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.

  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

  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:

    A Simple Box

    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.

  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/

  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!

  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!

  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 rather than lists for the markup. With a bit of mucking around I came up with a modification. It’s just a single 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.

    Why Bank Online with North Shore Credit Union?

    Easy. It’s safe, secure and easy-to-use.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nunc, ullamcorper pharetra, tristique in, volutpat nec, massa. Sed aliquam.


     

    Why Bank Online with North Shore Credit Union?

    Easy. It’s safe, secure and easy-to-use.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nunc, ullamcorper pharetra, tristique in, volutpat nec, massa. Sed aliquam.


     

  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.

  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.

  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…

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA