Customising custom corners and borders
The technique for creating a flexible box with Transparent custom corners and borders that I described here in mid May became quite popular. I have updated the technique to fix most of the glitches pointed out in the comments to the original post, and it should be pretty solid now.
One question that I’ve been getting is how to replace the images the demo uses for the borders and corners. It isn’t very complicated, but I realise it can seem that way at first, and since I’ve been getting questions about it I thought I’d explain exactly how to replace my demo images with your own.
Here’s a diagram (at twice the original size) that shows the distances you need to measure in your image:
The heights of the top left and top right corners need to be equal. The same goes for the bottom left and bottom right corners. So TL Y = TR Y and BL Y = BR Y.
The complete box image should be as wide as you want the box to stretch to before it starts breaking. In the demo I made it 1600px wide.
The border image is created by combining the shaded areas below “LB” and “RB”. The left part goes to the left and the right part goes to the right. The height doesn’t matter, but make it at least a few pixels tall to reduce the number of times the browser needs to repeat it vertically.
The CSS affected is the following, with the measurements from the diagram used instead of actual values:
/* Top border and right corner */.bt {background:url(box.png) no-repeat 100% 0;margin:0 0 0 TL Xpx;height:TL Y/TR Ypx;}/* Top left corner */.bt div {height:TL Y/TR Ypx;width:TL Xpx;position:relative;left:-TL Xpx;background:url(box.png) no-repeat 0 0;}/* Bottom border and right corner */.bb {background:url(box.png) no-repeat 100% 100%;margin:0 0 0 BL Xpx;height:BL Y/BR Ypx;}/* Bottom left corner */.bb div {height:BL Y/BR Ypx;width:BL Xpx;position:relative;left:-BL Xpx;background:url(box.png) no-repeat 0 100%;}/* Left border */.i1 {padding:0 0 0 LBpx;background:url(borders.png) repeat-y 0 0;}/* Right border */.i2 {padding:0 RBpx 0 0;background:url(borders.png) repeat-y 100% 0;}
While I was writing these instructions I made a quick customised demo to make sure the instructions actually work. Let me emphasise quick here – I did not make any images for IE I made the box image wider and dropped in GIFs for IE.
To make your own custom corners and borders you need to do the following:
- Create your box in Photoshop, Fireworks or whatever your favourite image editing application is
- Save one image with a complete box and one with just the borders
- Measure the distances shown in the diagram
- Enter the values into the CSS
I hope this makes customisation easier.
- Previous post: Falling in love with CSS
- Next post: Six JavaScript features we do not need any longer
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
This is great. But how the ** do you create these rounded corner images? I've never really been satisfied with my results..
Now wait X days before someone comes up with an online generator..
To create the rounded corners in Photoshop - use the Rounded Corner Box Vecotor Tools in your toolbar. This way it's scalable and effects can be applied to the layer, without loosing any quality.
I come from an architecture and drafting background. Rounded corners? Bah! Where are all the overshot corners? Lol, ~d
Thanks Roger, I will have to look into this a little more, it seems useful...
Martin:
1) Use the Rounded Rectangle tool in Photoshop. (Google it if you need to find where that's hiding in your tools Pallet)
2) Set the radius pixel size
3) Draw your box
4) Use a Blending Mode to add a drop shadow
Job done. :-)
Great work again, although the first box breaks on Camino .9a1
Matt Wilcox: Thank you very much - it worked out quite well. ;-) Thanks a lot!
Chet: which is the vector tool in Photoshop? :-)
What about IE? Many users still use it.
This is still a great alternative until we get the CSS3 border image capability (can't wait). Thanks for posting the details. The left side of the first box breaks in Firefox 1.0.4 when the window is wide like 1280px. Also, your quick demo isn't flying in IE.
Interesting that this doesn't work in iCab3.0 beta. That browser has very good support for CSS2.1, but its js handling is a bit weak. I took the parsed code of your page with Firefox, and created a new doc with it. iCab could render all corners nicely. But it doesn't render the corners thru js.
bill: I can't see any problems in Camino 0.9a1 here. In what way does it break?
Dmitry, Nicholas: The quick customised demo is just that - quick. I didn't make any images for IE.
Nicholas: It breaks in all browsers at that width since I made the image narrower. Quick demo, remember ;-)
Philippe: Interesting. Well, it's not fatal since it gets the default styling.
Quick thing for that demo: since you're not worrying about IE, you might want to go ahead and set some max-widths on those boxes. Once you stretch the browser window past the width of your graphic, the effect is broken.
Ok, I have made the image in the quick demo wider and thrown in GIFs for IE. Better now? ;-)
Thanks for the follow-up and the quick addition to the demo. My apologies for pointing out the obvious. ;)
It is nice to see a good scientific explanation of how all this works. I have always been a bit of a fudge artist with this type of thing, pushing padding and margins around till it doesn't break anymore. A quick look at Martin S's website reveals a beautiful round corner image in the header (liår) :) Thx
Is it just me, or is there a spacing bug in the bottom part of the floated divs in Firefox for Windows? I don't see it on any other browser...
Patrick: It isn't just you. It's a rounding bug in Gecko that fortunately seems to have been fixed in the latest nightly builds of Firefox. Try resizing your browser window and watch the glitch come and go.
This is a really nice solution. While I was employing it on my blog, I found the task of creating the images and CSS to be a chore, so I wrote a Python script to automatically generate them from a single image.
More info here: joehewitt.com
I know this isn't a normal comment, but great work on the illustrations for this article, they are what make it work.
I thanked you on the other page, here's a second thanks; I am actively using this technique on my Opera and Firefox User Javascript, you can see it at: Multipopup UserJS
It definitely is not for IE, tho. It is also not suitable for websites as it was designed to be as a userJS, it's big. The light-weight and IE compatible version (tho not using this technique) is running in the front page.
Sorry to ask a silly question but what tools do you use in Photoshop to 'measure' the graphics you mention?
And how can you be sure that you are measuring from the same pixel on the left as you are on the right?
I'm using Photoshop Elements...
nice Work Roger!
I am just getting to grips with this layout malarky :)
i especially liked the idea of the two lateral boxes but it would look silly if they werent the same height? and as part of a more complete display?
Can you give any hints about how to force any laterally-displayed DIVS to be of equal height, if they already arent. Your example happened to have them the same height :))?
i messed about with it by including a (hidden) div nested inside the i3 DIVS and changed heights depending on which was smaller (using offsetHeight differences) but it didint seem to work :((
Thx in advance
Hi...
follow-up to previous post
After 4 cups of coffee and a flurry of cursing containing the word 'Microsoft' I managed to do it..
Simpler than i thought :)
Yet again thanks for inspiration... Roger
I commented the original post with a question (since answered), but I forgot to add a quick note of gratitude for such a robust and slick implementation. The more I use (and tweak) it, the more ingenius it seems. I've tried and abandoned a buttload of round-corner techniques but this is the first one that ever felt reliable enough to actually put into a production site. So thanks.
I need to customize only a header box to put an image into that. It's possible ? I think to a possibility to create a smaller image (700px width) to prevent resize window from large screens. Another question: how can I create the border image from the final box image ?
Thanks for this great tutorial.
It seems there are two mistakes in the 'template' css provided here. I'm a bit cautious here becaused it's been posted for a while and no-one commented about that. Nevertheless, these corrections work for me, so...
Line 18 works (for me) with
margin:0 0 0 BL Xpx;
instead of
margin:0 0 0 BR Xpx;
Line 26 works (for me) with
left:-BL Xpx;
instead of
left:BL Xpx;
Can you confirm that ?
Marian: I'm not sure what you mean by "a header box".
To create the border image, just copy a section of the left and right borders and paste them next to each other in a new file. Put the left border to the left and the right border to the right.
Yves: *blushing* Yes, you are correct. Those are typos. It took a while for someone to notice them ;-). Updated now.
this was a wonderful guideline thank you!
Do you think this technique could be used with the borders shown in this mockup?
mockup
I can't tell, because it seems that all examples include space between the box and the edge, and I don't need any because I'm not using a drop shadow.
I meant the "box" in the example.
Jordan: Yes, the box doesn't have to have a drop shadow. The gradients in your mockup may cause some problems though.
I figured it out here... http://beta.blissdev.com
But does that seem like a semantic solution?
Well, guess I can't put code in, but you can see at the link.
so, semantic, or no?
Hello, I have been trying to impliment this solution and I got stuck at one point where the background color was not showing on the right hand side of the box. After some research on this site, it looks like the cb.js file puts all of the content into the .i3 class; however, the .i3 class is not specified on this demo. So my box works great now but I just thought I would ask if you should add the .i3 class to this tutorial?
I found this: .i3 { background:#fff; border:1px solid #fff; border-width:1px 0; padding:0 10px; } in the source of your demo here ( http://www.456bereastreet.com/lab/transparentcustomcorners_borders/ ). Maybe this will help some of you out in the future.
Sorry, comments are closed for this post.