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:

Diagram showing the measurements that need to be edited in the CSS.

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:

  1. /* Top border and right corner */
  2. .bt {
  3. background:url(box.png) no-repeat 100% 0;
  4. margin:0 0 0 TL Xpx;
  5. height:TL Y/TR Ypx;
  6. }
  7. /* Top left corner */
  8. .bt div {
  9. height:TL Y/TR Ypx;
  10. width:TL Xpx;
  11. position:relative;
  12. left:-TL Xpx;
  13. background:url(box.png) no-repeat 0 0;
  14. }
  15. /* Bottom border and right corner */
  16. .bb {
  17. background:url(box.png) no-repeat 100% 100%;
  18. margin:0 0 0 BL Xpx;
  19. height:BL Y/BR Ypx;
  20. }
  21. /* Bottom left corner */
  22. .bb div {
  23. height:BL Y/BR Ypx;
  24. width:BL Xpx;
  25. position:relative;
  26. left:-BL Xpx;
  27. background:url(box.png) no-repeat 0 100%;
  28. }
  29. /* Left border */
  30. .i1 {
  31. padding:0 0 0 LBpx;
  32. background:url(borders.png) repeat-y 0 0;
  33. }
  34. /* Right border */
  35. .i2 {
  36. padding:0 RBpx 0 0;
  37. background:url(borders.png) repeat-y 100% 0;
  38. }

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:

  1. Create your box in Photoshop, Fireworks or whatever your favourite image editing application is
  2. Save one image with a complete box and one with just the borders
  3. Measure the distances shown in the diagram
  4. Enter the values into the CSS

I hope this makes customisation easier.

Posted on June 21, 2005 in CSS