Part I showed how to apply customized borders and corners to liquid CSS layouts. The technique works well, as long as your design uses solid background colors. But what if you want to use patterned or gradient backgrounds? In Part II, we’ll extend the technique so you can do just that.
A design problem#section2
We’ve received another directive from our hypothetical graphic designer of Part I. Encouraged by the results of our previous collaboration, he has attached a new sketch he wants us to incorporate. (That’s it on the left. Four rounded corners against a tall, gradient background.)
![[Image shows a white box with rounded corners on a graduated background.]](https://i0.wp.com/alistapart.com/wp-content/uploads/2012/07/custom_corners_ill2.1.jpg?w=960&ssl=1)
“It’s easy to change, right?” he asks.
“Piece of cake,” is our initial response.
We’ll start off by slicing up the new sketch, and deal with technicalities later.
See Step 2.1 — the sliced-up sketch.
Why it doesn’t work#section3
The styles for our previous attempt at customized borders and
corners looked like this:
div.Article {
background:
url(images/custom_corners_topleft.gif)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
}
div.ArticleBody {
background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
This technique works by placing
background images in elements that follow each other
in a document structure. These elements are marked up in
the same stacking level, but will display stacked on
top of each other in the order in which they appear in the
document.
The first element to occur
is placed “under” any following element
unless a specific z-index value tells
the user agent to do otherwise.
In our example,
the large top left background
image is placed within the first element to appear
in our box, which means that our <h2>
and all following elements with background images
will appear on top of it, thereby hiding the
right and bottom corners (and sides) of the top background image.
left
So if we’re going to use borders and corners that
require transparency — like a rounded corner box
that floats freely on a gradient background — our technique will prove inadequate.
Let’s see what it looks like.
See Step 2.2 — The new graphics applied to the old CSS
How to make it work#section4
The fix is easy. We’ll use relative positioning
to nudge around the boxes that contain the background
images.
![[Image shows a white box on a graduated background. The top right corner juts beyond the boundaries of the rest of the box.]](https://i0.wp.com/alistapart.com/wp-content/uploads/2012/07/custom_corners_ill2.2.gif?w=960&ssl=1)
In this illustration, we’ve outlined
our div.Article with a solid black,
and our
div.Article h2 with a solid red to show
the technique we’re using. We’ve moved the div.Article block
h2
containing our top right background image
14px to the right by giving it a right:-14px
value and positioning it relative to its parent
element. (14px is
the width of the top right background
image.)
We’ll simply apply the same principle to all other
elements we need to move, using the width or height
of the background image we want to reposition to determine how much to move each element.
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
position:relative;
right:-14px;
padding-left:0;
/* Compensation for the
repositioned box */
}
div.ArticleBody {
background:
url(images/custom_corners_right.gif)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
position:relative;
right:-14px;
padding-left:0;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
position:relative;
top:12px;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
padding:15px;
display:block;
margin:-2em 0 0 0;
position:relative;
right:-14px;
padding-left:0;
}See Step 2.3 — Now we’re really getting there
We’ll have to compensate for the repositioned
elements in our final layout calculation, but this
really is all there is to it.
The grand finale#section5
Now we’ll apply our technique to a more complex layout.
This time we’re demonstrating it on a three-column layout with a header from Owen
Briggs. We’ve included three alternate stylesheets for browsers that support style switching (like
Mozilla Firebirdfox),
to demonstrate the drastic design impact that customized borders and corners can have
on your next project.
We’ve also added
a fresh new div to the long center
column, and given it the class name, ArticleLongContent.
We use this div to wrap our ArticleBody if the contents of the article grow too long for our top left background image to cover.
The class contains the following style:
div.ArticleLongContent {
background: url
(../images/custom_corners_leftborder.gif)
top left repeat-y;
}See step 2.4 — Our technique applied to a layout with 3 columns and header
Acknowledgements#section6
Thanks to Inge Jørgensen and
Stephen Paul for alternate graphical examples, Brian Alvey for letting me abuse his Browsercam account, and all the people who brought up interesting points in the discussion of Part I of this article.
Presumably this is the sort of effect CSS3’s border-radius property is supposed the achieve?
I love these two articles and have, in fact, created a number of designs already based on Part I of “Custom Corners”. In Part II, especially, I still see a few tiny holes in IE6 (Windows XP Pro). The example link for Step 2.4 introduces gaps above the footers in each column — small ones in the left and right and a large one across the whole center column — but only after the user scrolls the page content. Resizing the browser, even by a pixel or two, makes the gaps disappear, but any scrolling brings them right back.
Is there any end to the madness?! (Kudos, by the way, to Madsen. This is a fine article. I think we’ll all be happier when these browser bugs are laid to rest.)
Even stranger. I get them too (Win2k/IE6) but only when I scroll using my mouse wheel. If I use IE’s scrollbar, everything is fine.
Those wacky IE developers!
As I’ve demonstrated before, in the 1st part, this is the 99% exact replica of Step2.3 testcase, but using only one image, instead of slicing into 5 images, which seems unnecessary.
http://phoenity.com/tests/custom_corners_one.html
The background image for the main body doesnt seem to repeat to the full width of the table in 1600×1200 using Firefox 0.8.
Cant quite see whats going on here though to fix it…
RE: CSS3
—
No. The keyword here is “custom” – not “round” 🙂
RE: Customs Corners/Borders with only 1 image
—
Yes – your approach makes sense for smaller sections, but the slicing prepares the technique for sections with “infinite” length, as demonstrated in the center-column in step 2.4
RE: Slight problems in 1600×1200 res
—
The background-image used for this article is only of a certain size, and therefore the layout looks like it’s “breaking” when viewed at very large resolutions. Use bigger images, or limit the possible size of the section.
And by the way – how dare you accuse me of using tables for this? (throws glove!)
😉
Søren Madsen wrote:
Yes – your approach makes sense for smaller sections, but the slicing prepares the technique for sections with “infinite” length, as demonstrated in the center-column in step 2.4
—
“infinite” length? I don’t understand. So far I know PNG/GIF are raster formats, not vectors, so they cannot get infinite width/height, right? Please correct me if I’m wrong.
Chris E Boy; I am sure you ment to say DIV yeh??
Søren; Im sure he didn’t mean any harm. No need for throwing gloves. Here is a stone. 😉
CSS3 has border-image 😉
( http://www.w3.org/TR/css3-border/#the-border-image-uri )
http://www.vertexwerks.com/tests/sidebox/
same principal
Yes – part one of the article series was, which is also noted in the acknowledgement in said article, but not this one.
This article demonstrates how to work with gradient/patterned backgrounds – something that the Trashbox example cannot do.
Lim Chee Aun:
“So far I know PNG/GIF are raster formats, not vectors, so they cannot get infinite width/height, right?”
You are correct, but the “inifinite width/height” is referring to the potential sizes of the content box, not the images.
Because this technique positions the corner images at the edges of the content box, *repeating* them where necessary, not stretching them, the content can be as large as required and you still have your images in place.
Your single-image technique works perfectly well if you have a fixed size for your content box, but the 5-image technique is for fluid designs.
Any clearer?
Perhaps I missed it, or don’t understand the concept fully, but wouldn’t creating a GIF as large as some of the ones discussed here cause problems with page loading times and all?
Also, I just want say thanks for all the great info here, from both the article authors and the other folks responding to them. I have learned more here than in any class or book!
Thanks.
I’ve been playing around with custom background borders for a while now, there are a number of different techniques to achieve similar effects. Here’s one of my quick experiments: Holepunched
Yet another informative and useful article. Thank you Mr. Madsen and ALA. You make my life easier.
I might just have to use this article to help me update my site. I think that Jakob Nielsen might even have a graphically fancier site than me right now 🙂
Shakey:
“Because this technique positions the corner images at the edges of the content box, *repeating* them where necessary, not stretching them, the content can be as large as required and you still have your images in place.”
I see.. div.ArticleLongContent and div.ArticleBody accumulate the changing/expanding height of the container, with the repeating background images.
“Your single-image technique works perfectly well if you have a fixed size for your content box, but the 5-image technique is for fluid designs.”
well, my testcase is fluid too. You can try it by resizing the font sizes. By the way, I’ve also created another testcase, 99% replica of step2.4, still using only 1 image:
http://phoenity.com/tests/custom_corners_two.html
I can’t seem to be able to figure out how to do that gradient background. Do I just apply the gradient bit (black->turquoise for example) and position it at the bottom, or am I just silly?
The holes shown in IE6 are coming from what is known as the IE peekaboo bug (http://www.positioniseverything.net/explorer/peekaboo.html). A manifestation of that particular bug. The good news is that there is now a little fix for it. It will show on anyones IE6 browser with XP, granted. You just have to scroll with the mouse will slowly up and down… you’ll end up seeing the gap (look at the bottom).
As to work with less images, you can with two, one holding the 4 corners and another one for the right-hand side shadow that will allow infinite length.
I’m at work right now, but the moment I get home I will post a link with a sample of how to modify the CSS in the article for the peekaboo bug and the alternative 2 images CSS. Give me a few hours 😉
“with the mouse will slowly up” should be “with the mouse wheel slowly up”. Sorry for that 🙂
Can be found here – http://interface-7.net/20040218/
I can select any line or paragraph of text, but I can’t seem to select, say, the title (“Middle”) and the paragraph below it. Is there a way around this? Is this a browser bug?
A stretch/extend keyword would be infinitely useful in CSS. Would make this and other techniques so much easier, and we’d get far more out of our bitmaps…
As always, thanks for the great article. I have a question, or could be a suggestion for part III of this series…
Is it possible to have a gradient INSIDE the content box, instead of just an all white background and have it be vertically fluid without breaking the gradient?
The one problem with this technique is that you have to make the top-left image almost ridiculously long, and even then it’s not always long enough (especially with text-resizing). Has anybody come up with a way that doesn’t require that?
By the way, I’m very much aware of the technique where you have header and footer images, then vertically tile the content background, but that only works when the width of the box is fixed, not when it’s a relative value.
I’ve created another testcase, to fix my previous technique with long containers, using only 2 images:
http://phoenity.com/tests/custom_corners_three.html
http://www.cubedonline.com/newdesign/index.html
rounded effect done with two images (one with the headers; the other with a bottom aligned image in the container div).
rounded effect done with two images (one with the headers; the other with a bottom aligned image in the container div).
Yes, it is quite elementary when only worrying about fixed-width divs, however the end product of this article creates a 100% width design, with divs that vary in width depending on resolution.
Good article by the way – I am also (somebody else mentioned it on here) wondering about the best way to have a nice gradient as a background image across different resolutions … I can’t quite get my head around it. 😉
yeah, I forgot that…gee, I feel stupid. Anyway, I’ll start looking into ways to get gradients to work. I imagine it will take some crafty background hacks and tricks.
your site is beautiful (saw it via cssvault.com)
I love this approach but I can’t see myself use it for professional websites, yet. It doesn’t seem to be very reliable to me, when these bugs in IE get fixed (ok.. if ;)) I don’t want to re-do all websites I made.
What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?
Those 2 Articles have changed my life as a webdesigner a bit (well, in fact, ALA did). Those approaches to rounded corners are fine, still I developed another one to circumvent the inconvenience of either a giant topleft-image, and/or a box whose size is restricted to the background-images size.
As was mentioned here before, this forces me to expand the structure to 10 elements (a container box, a left, middle and right box for the top, center, and bottom part), plus the inner markup.
Although not so elegant in matters of markup and semantic, I now have real fluid boxes which can expand right up to mars. And transparency and dropshadows for png-supporting browsers…
To find back to easy-to-understand markup, I throw the whole box-stuff into a little script, thus all I have to do is give my container an ID and invoke the script who will do the rest.
(see it under development under http://www.d-ing.net – following pages)
d. )
well, that shouldn’t be too hard – just create the borders / corners with the transpareny *inside* nad the main container with the (must be huge) gradient…
d. )
Soren:
“And by the way – how dare you accuse me of using tables for this? (throws glove!)
;)”
Oops! I dont know why i said that. Just goes to show that 10:47am is far too early to be picking holes in people’s code :/
of course i meant div… i’ll be using this article in the near future (probably in a fixed width kinda way), cheers Soren!
Noticed this in div.Article h2
I noticed that in ie (where else?) that without this line, the top of the image is clipped. Doesn’t show up in firefox (haven’t tested more).
Tried replaceing the images with borders, and without the font-size, the top of the border doesn’t show. Has anyone else seen this?
Also setting the height of div.Article h2 to 1.3em does the trick.
“What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?”
Using CSS for layout doesn’t mean you have to use CSS hacks. As a matter of fact, I didn’t really see any hacks in the code shown in the article; it all seemed like sound CSS for the most part.
I’ve put up a page with details about the holes showing up in IE at http://www.sonnd.com/ala/
I didn’t get around to fixing it, but it shows what the problem is with IE.
For whatever is worth, I find the problem to be small enough to be ignored, for this particular case. I’ve found other situations where the peekaboo bug does indeed hide relevant content.
Having said all that, maybe it’s not the peekaboo bug that we are seeing here (or not only) 😉
By the way, just in case I forgot to mention it before, great article!
if you resize text while viewing the html version of the sample (http://www.alistapart.com/d/customcorners2/step2.4.html) it breaks (or at least in safari 1.2).
so yeah, other people have noticed that, too.
Well; again – it doesn’t really “break”. It’s the same as viewing these examples at very large resolutions; the back-images used aren’t big enough.
So – if you want to make sure that it will not “break” (meaning that the images gets too small when viewers enlarge the specified font-size) ; make the background-images bigger.
In the case of text-resizing; it’s the background-image placed bottom right that you would make higher than the one used in the article.
Good, it’s fluid, round of applause?
No it’s not infinate flexible as you say, the only truely flexible varient of this common technique is multiple nested
Soory if I’m burtsing your bubble, but every time I increse text-size, it bursts anyway!
Good, it’s fluid, round of applause? No it’s not infinate flexible as you say
Yes – the center-column at the specified font-size in step 5 has “infinite” length. Like I wrote – if you want to make sure that the fonts don’t overflow the background-images; make them bigger. I never ever wrote, nor said or meant, that this is infinite flexible in every direction.
I have to ask – how much are you increasing font-size?
Oh, and – why the indignation, mate?
first of all, sorry I forgot to say ‘good work’, it’s just that personally, after I first read about using multiple backgrounds to make expanding tabs, any extension of that seemed obvious and I didn’t see the point in this extension article – but I was wrong it’s a good educational story.
I thought you (may have been someone else) posted that the fluid-ness went on when it’s actually pretty easy to break.
I’m on 1280 by 1024 @ 115dpi.
IE6: breaks with just one text-size notch up.
FireFox8: breaks with 2 whole notches.
To use this technique you have to consider the effect of width on the height (when text re-flows to take more lines), in addition to screen resolutions and text-size.
I think there must be a way using thin corner and side images and a repeat bg middle behind the content.
Multiple background images on each element has been on my CSS wish list for ages.
Oh and sorry again for the hasty sarcastic remark!
And on the subject of multiple borders on a single element, I thought about trying to emulate this using CSS dynamically added content…
The aim for maintenance purposes is to just have one element in the HTML, and add the multiple nested elements with the CSS content: ; property applied to style rules involving the ::before and ::after pseudo selectors.
This could also be used to surround elements in other border yielding markup, but as the resulting document will actually have the extra elements in the document, it is not as good as having multiple backgrounds on a single element, or the CSS3 border-image stuff. As my idea, (if it works) has no extra markup in the HTML file, it has one important advantage – to change the technique or remove it in the future only requires changing the CSS!
It is with great trepidation that I dare post anything…
I’m incorporating more and more css in to my sites, but am still using *gasp* tables (mainly out of impatience). I’ve cribbed two techniques from ALA for this site’s redesign http://www.coffeeshopofhorrors.com and am thinking that I might be in over my head. I’ve already had to float the Suckerfish-ish drop downs right instead of left to get them to center more accurately (I don’t know why this seems to work better) and am noticing that my one-image corner div behaves strangely in IE Mac. Perhaps I’m just to green to get it.
test page is here:
http://www.westafer.com/b/csoh/csohNav1.html
Any advice is greatly appreciated.
Thanks.
I have some troubles with the rounded corner in firefox. Somehow i can’t see the bottom-right corner.
When using IE the corner does show but then i see the ‘peekaboo gap’. When i try to use the trick shown in the post made by Jose Fandos (http://www.sonnd.com/ala)the links in my footer won’t work anymore.
Can anyone tell me what i’m doing wrong?
my site is: http://mattijs.thq.nl/pivot/
and it’s dutch but that won’t matter i think.
You’ve placed the background-images in the wrong CSS selector (for the HTML you’ve got)
Change your .entryfooter class to this:
.entryfooter {
color: #666;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: normal;
text-align:right;
margin: 0px;
padding: 6px 0px;
clear: both;
background: url(http://mattijs.thq.nl/pivot/css/bottomright.gif) bottom right no-repeat;
position: relative;
right: -14px;
padding-right: 1em;
}
There is a gap in the background of the middle footer paragraph in Mozilla 1.6 as well. At a *normal* window size it is a very thin line above the text but if you bring the size down to that of, say, a PDA it becomes a big chunk. Might it be a code problem after all and not a IE bug? Also, when you get down to that sort of viewport resolution, long words can overflow their containers but this is a problem all fluid designers have to deal with.
Thanks for the articles. I have been thinking about *de-blocking* my designs for some time but haven’t known where to start. Now I do.
BTW Don’t try to print anything using Firexxxxfox. It’s a bad joke.
I’m not entierly sure this works in all browsers/configurations/anything but I sat down and thought about the problem a little bit and came up with a solution that uses one image and four div’s. It’s a combination of image hacking and background techniques. Right now it lives on http://www.originalgangsters.com/box/. If this has been solved the same way before, please tell me.
I’m putting two of these side by side to get a ‘pages in a book effect’. Try as I may, I can’t figure out how to get both ‘pages’ to be the same size and scroll overflow text in a page. Any insights would be largely appreciated. TY
Can you make a custom corner print? isn’t the default in most browser set to print without background colors and images?
This doesn’t seem to take into account a large display size. My 1600×1200 monitor shows a gap between the end of the top left image and the right borders. Perhapse just making that image bigger would help, but I don’t think that’s the best solution.
This solution will definately work, though, for cells with a fixed width.
Im working on this site and Im using this method to create a ouline around tables. It looks great in everything for mac, but IE on PC looks really messed up. Here is the url: http://www.designsequence.net/mead/index.php?id=people . The CSS file is here: http://www.designsequence.net/mead/mead_css.css . Anyone know how to fix this?
I have noticed that if you add quite abit of text in the Article box then it seem to break at the bottom ????.
Cant See why
its not really that great –
i could work out wether it was a tutorial or not?
could be good to be ‘custom’ border, not rounded
Just like Dave said it’s fixed and can not be used in case of serious projects where you need to have dynamic width.
Unfortunately adjusting the background size for a particular project is not the solution to go with, it’s a hack.