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.
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
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
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 — 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 — 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.
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!
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!
For fluid widths, try display: table-cell
http://www.stilbuero.de/corners/rounded_corners.html
Happy coding, Klaus
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.
I noticed one thing this misses. It seems to be dependent on the definiton list only having one term-definition pair.
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.
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.
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…
Very informative and insightful, just what I was looking for. Thanks.
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