CSS Photo Corners

[rawr]

/* For standards-compliant browsers AND Internet Explorer 6 */

.corners
{
display: block; /* Force it to have a width and height */
float: left; /* Make the width no wider than its contents (the image) */
position: relative; /* Yes, you CAN mix floats and positioning! */
}

.corners b
{
position: absolute; /* This is the key! */
height: 24px; /* The height of your corner images */
width: 100%; /* You can put the width of the images here, but 100% works fine. */
}

.corners .tl
{
background: url(/files/img/tl.gif) no-repeat left top;
top: 0;
left: 0;
}

.corners .tr
{
background: url(/files/img/tr.gif) no-repeat right top;
top: 0;
right: 0;
}

.corners .bl
{
background: url(/files/img/bl.gif) no-repeat left bottom;
bottom: 0;
left: 0;
}

.corners .br
{
background: url(/files/img/br.gif) no-repeat right bottom;
bottom: 0;
right: 0;
}

This is a picture with photo corners applied by CSS:

If you can read this, then this demo isn't going to be very informative to you

Here’s the source code for the preceding paragraph:

<b class="corners">
  <img src="photo.jpg" width="256" height="256"/>
  <b class="tl"></b>
  <b class="tr"></b>
  <b class="bl"></b>
  <b class="br"></b>
</b>

And here’s the CSS, which works fine in Firefox 1.5 and in Safari on Mac OSX:

.corners
{
   display: block;         /* Force it to have a width and height */
   float: left;            /* Make the width no wider than the image */
   position: relative;     /* Yes, you CAN mix floats and positioning! */
   height: 256px;          /* See note on Drupal theme bug */
}

.corners b
{
   position: absolute;     /* This is the key! */
   height: 24px;           /* The height of your corner images */
   width: 100%;            /* You can put the images' width, but 100% is ok */
}

.corners .tl
{
  background: url(tl.gif) no-repeat left top;
}

.corners .tr
{
  background: url(tr.gif) no-repeat right top;
}

.corners .bl
{
  background: url(bl.gif) no-repeat left bottom;
}

.corners .br
{
  background: url(br.gif) no-repeat right bottom;
}

Unfortunately, it fails as-is in Internet Explorer 6. I tried fiddling with the expression extension, which allows small pieces of JavaScript to be inserted into CSS. It’s ugly and non-standard, but it can be useful. But while I was fiddling with it, I discovered that IE really just needed some extra hand-holding with its positioning: specify bottom: 0 and/or right: 0 where required, and it works… almost. There were odd discrepancies in the layout. I found the cause of them when I tried changing the text size: the spaces between the <b> tags were messing up the display! I took out the spaces and line breaks and added the following CSS, and it worked!

* html .corners b
{
  height: 24px;       /* The height of your corner images */
}

* html .corners .tr
{
  right: 0;
}

* html .corners .bl
{
  bottom: 0;
}

* html .corners .br
{
  bottom: 0; right: 0;
}

I rolled that IE-specific stuff back into the standard version; it’s harmless. View the stylesheet to see the result.

Edit: Konqueror (and Safari)

A test in Konqueror on Linux revealed that the above CSS wasn’t originally working. The changes, which I’ve made here as well as in the CSS and HTML, were to put the <img> element before the <b> elements, and explicitly specifying the left/right and top/bottom position properties. It now appears to work in Konq, which suggests it should work in Safari on the Macintosh, but I welcome testing from someone who actually has a Mac.

I hope this is of some use to you. Feel free to use this method in your own CSS; you don’t need to give me credit as long as you don’t falsely claim to have thought of it yourself (although I don’t mind if you get paid for using it). I’d like you to let me know if you find a use for it, too!

[/rawr]