Other Rounded-Corner Techniques

While the previous approach was a good example of a fixed-width box featuring rounded corners using CSS, things get a bit more complicated when a fluid-width box is desired. By fluid width, we mean the box is flexible horizontally as well as vertically.

Why is it more complicated? Because it requires the placement of four separate imagesone for each rounded corner. Each corner needs to be separate in order for the box to be stretchable in every direction. And four images means four markup elements are required to reference each image as a background.

Some methods involve using generated content in the style sheet, using the :before and :after pseudo-elements to insert more than one background image on a single element. The problem with these methods is that at the time of this writing, Internet Explorer (IE) does not support generated content, therefore excluding a large portion of the browsing world from seeing the rounded corners.

So, what to do? Well, if a fixed width is predetermined, you can easily use the method described earlier in the chapter and use just two background images: one for top-left and -right rounded corners, and one for bottom-left and -right rounded corners. Having two markup elements available to reference those images is usually not a problem. If a fluid-width box is a requirement, then you'll have to add extra markup if you'd like IE users to see the same design.

HAPPILY ROUNDED

Here's how Ethan Marcotte, standards craftsman and technical editor for this very book, handles the challenge for the Browse Happy Web site (Figure 5.15, http://browsehappy.com).

Figure 5.15. Browse Happy is a site designed to help people learn about standards-compliant alternatives to Internet Explorer.

Ethan uses a rounded box to indicate a standards-compliant browser that a user has "switched to," containing the name of the browser and its icon (Figure 5.16).

Figure 5.16. This rounded box can expand in any direction.

Instead of assigning a fixed width for the box, Ethan allows the box to expand and contract horizontally as well as vertically when more (or larger) text is placed within it, using a variation on the aforementioned "Sliding Doors" technique (Figure 5.17).

Figure 5.17. With increased text size, the box will grow horizontally and vertically while maintaining its rounded shape.

Let's build another example, based on the techniques that Ethan has employed to achieve a truly flexible box, capable of anything and everything that is thrown at it.

The markup structure

As I mentioned earlier, in order to maintain a flexible-in-every-direction box, the unfortunate reality is that we need to add extra markup to the mix. This extra markup is necessary to reference the four corners of the box independently, so that it can expand in all four directions if needed.

note

I've changed the markup slightly here, to keep the example simple since it's out of context. Originally, the rounded box was part of a definition list that also contained the name of the "switcher" and other information. This is a clever and smart way of leveraging definition listscheck the source of http://browsehappy.com for details.

Keeping in mind that we need a minimum of four elements in which to reference background images from, we create a markup structure as follows:

 <div >   <p >This box is:</p>   <p ><em><a href="/browsers/firefox/">Indestructible!</a></em></p> </div>

A container <div> followed by a paragraph gives us the first two elements. For the complete four, we wrap the arrogant "Indestructible!" link with a second paragraph and (here's where the arguably extraneous markup comes in) an  element. I'm using  here because technically I could be intending to convey emphasis on the link as well. At the same time, I'm admittedly sneaking this element in here. It's something I try to avoid, but in this case, we'll need that fourth element in order to reference the necessary background images that create the corners (Figure 5.18).

Figure 5.18. We've structured the box's markup to give us four available elements to assign background images to.

Image strategy

Although we'll reference a background image four times (one for each corner), let's borrow the crafty solution used on the Browse Happy site, which requires only two GIF images. This approach will start to make sense as we look over the images themselves.

Shown in Figure 5.19, rounded-left.gif is a 9-pixel-wide GIF image that contains both the top and bottom rounded corners of the left edge. We created it at a much taller height than anticipated to account for larger amounts of content.

Figure 5.19. The rounded-left.gif image contains both the top- and bottom-left corners.

Shown in Figure 5.20, rounded-right.gif is a similar image; it handles the top and bottom rounded corners on the right, as well as the top, right, and bottom edges. This image is the same height as rounded-left.gif, and is also much wider than originally needed.

Figure 5.20. The rounded-right.gif image contains the top- and bottom-right corners. This image also fills in the top and bottom borders for the box.

It's time to position these imagesand this is where the cleverness comes in. The rounded-left.gif image will be aligned top for the top-left corner (Figure 5.21), and then used again aligned bottom for the bottom-left corner.

Figure 5.21. When aligned to the top, the image's lower corner will be revealed only if the box grows large enough for it to peek out.

As long as the box never gets taller than the image, then the unused, hidden corner is never revealed (which explains why we made the image sufficiently tall to begin with). The reverse is true for rounded-right.gif, which will also be used twicefor the top- and bottom-right corners.

Use your best judgment as to how tall and wide to make these images, depending on what type of content will be placed inside. Build in some breathing room for unexpected text sizes and content amounts.

Let's now move on to applying style to our markup and pull the whole design together.

Applying styles

Because we don't want to assign a fixed width to the box and yet we want the rounded corners to "cling" to the content within in it, let's float the container. Floating the container prevents the box from being as wide as the window (or other container above it). Instead, the width of the content inside the box dictates how wide the box will stretch.

 .container {   float: left;   color: #666;   }

In addition to floating the box left, we've added a base color for text within the box: a dark gray.

Next, let's strategically place the two background images across the four available elements in our markup. We first assign the top-right corner as the background for the main container, using the top half of rounded-right.gif by aligning the image to the top and right of the element.

 .container {   float: left;   color: #666;   background: url(img/rounded-right.gif) top right no-repeat;   }

Notice that we're specifying the image to sit at the top and right of the element as a background.

Figure 5.22 shows the results, with the upper half of rounded-right.gif showing through as the background image for the entire container.

Figure 5.22. Aligning the image to the top and right reveals the corner.

The next element in line is the first paragraph within the container, which we've identified with a (for description). Let's assign the top-left corner by using the upper half of rounded-left.gif, aligning it top and left. We also zero out default margin and padding for the  element here. We'll add back in the appropriate padding a bit later.

 .container {   float: left;   color: #666;   background: url(img/rounded-right.gif) top right no-repeat;   } .desc {   margin: 0;   padding: 0;   background: url(img/rounded-left.gif) top left no-repeat;   }

Figure 5.23 shows the results of the second background image, which adds the top-left corner.

Figure 5.23. Aligning this image to the top left reveals the corner.

Next, we add the bottom-left rounded corner by assigning the lower half of rounded-right.gif to the second paragraph that we've marked with a . Where we previously used the upper portion of this image by aligning it top and left, we now align it bottom and left to reveal the bottom corner. We also add 9px of padding to three sides of the first paragraph to give it proper spacing against the sides of the box, as well as 9px of padding on the left side of the second paragraph. This is the same width as the image itself, which allows the corner to be seen behind the "Indestructible!" link.

 .container {   float: left;   color: #666;   background: url(img/rounded-right.gif) top right no-repeat;   } .desc {   margin: 0;   padding: 9px 9px 0 9px;   background: url(img/rounded-left.gif) top left no-repeat;   } .link {   margin: 0;   padding: 0 0 0 9px;   background: url(img/rounded-left.gif) bottom left no-repeat;   }

Figure 5.24 shows the progress thus far, with three of the four corners assigned to their correct positions. One more to go.

Figure 5.24. We added the third corner by reusing rounded-left.gif but aligning it to the bottom.

The final background image will be attached to the  element that is nested within the second paragraph. We'll assign the lower half of rounded-right.gif by aligning it bottom and right, in addition to including a bit more padding to properly space the text evenly within the box. Most browsers will italicize text wrapped with , so we'll also want to override that back to normal.

 .container {   float: left;   color: #666;   background: url(img/rounded-right.gif) top right no-repeat;   } .desc {   margin: 0;   padding: 9px 9px 0 9px;   background: url(img/rounded-left.gif) top left no-repeat;   } .link {   margin: 0;   padding: 0 0 0 9px;   background: url(img/rounded-left.gif) bottom left no-repeat;   } .link em {   display: block;   padding: 0 9px 9px 0;   font-style: normal;   background: url(img/rounded-right.gif) bottom right no-repeat;   } .container a {   font-size: 130%;   color: #e70;   }

Normally,  is an inline element, which doesn't expand as wide as its parent container and therefore wouldn't work for holding the background image behind it. To fix that, we add the rule display: block; to turn the  into a block-level element, forcing the dimensions of whatever text is contained within to reach the edges of the box. In addition, we set links within the box to be larger than normal, and orangebecause, well, that's what an indestructible link should be.

Figure 5.25 shows the completed box, with four rounded corners created by aligning two background images.

Figure 5.25. Here is our completed, "indestructible" box.

Indestructible nature

Just as in the Browse Happy example, notice that our rounded box will expand and contract in all directions, depending on text size or content amount. It is truly indestructible (Figure 5.26).