PNG transparency rounded corners using images

0
rounded corners title

UPDATE: Schillmaina has produced a new improved solution. See it here.

It seems like there’s a million and one different solutions for creating round corners for boxes. There’s a good summary of many of the rounded corners solutions at www.smileycat.com: CSS Rounded Corners ‘Roundup’

That’s why it’s surprising to find there’s no cross-browser solution for rounded corners using PNG transparent images.

But by tweaking one of the solutions out there it appears it is possible to get cross-browser solution for PNG transparency rounded corners using images. Click the link to see it in action.

One of the closest there is to a working solution can be found at Schillmania’s rounded corners solution.

Unfortunately there’s was an overlap producing a small imperfection. See the test for an image displaying this.

Another downside is that’s also only possible to use an opaque box with that CSS code (and support IE6) – only the shadow effect can be transparent. A transparent white box with left border ornamentation isn’t possible.

The code used in the test has been updated to give the following enhancements:

  1. It now works in Internet Explorer 7.
  2. Created new code to enable a design which includes border ornamentation on all four sides.
  3. Added Stu Nicholl’s (CSSPlay.co.uk) minimum width for Internet Explorer 6 solution so that the layout doesn’t collapse at narrow browser widths.
  4. Used conditional comments to serve Internet Explorer 6 with non transparent GIF images (and a white background for the BODY).

Although there are a huge number of rounded corner solutions with much better mark-up and CSS code, designers sometimes need the flexibility of using images, and the png drop show effect.

Unfortunately the JavaScript solution from 456bereastreet.com doesn’t work in IE7. (See the test for an image displaying this.)

There are better solutions for using gif images when the transparent png effect for shadows aren’t needed:

Check out Franky’s solution at his developerscorner.

And there is the solution from A List Apart: Creating Custom Corners & Borders Part II.

The CSS used for the box above relies on the more forgiving nature of the black colour. The design only requires an image on the right hand side to give the shadow effect – on the left no image is needed as it’s just plain black.

In order to make the opaque design above (from schillmania.com) work in Internet Explorer 7 the following changes were needed:

Added the following CSS to .box .bd .c : { position: relative; padding-right: 6px; width: 100%; height: 100%;

Then reduced the right margin of .box .bd .c .s by 6px

In order to have this second design which includes border ornamentation on all four sides – working in a fairly similar fashion in both modern browsers and Internet Explorer 6 – the following adaptions to the IE6 style sheet were needed:

  1. Crop the middle left border image so it doesn’t cover the entire width
  2. Move the middle right border image into the main inside DIV – where the text resides (this meant leaving out the image with the daisies.)
  3. Adjusting the margin on the inside DIV so the middle left boder image can be seen beneath it (margin:0px -4px 0px 14px;)
Add a comment

Leave a Comment

Your email address will not be published.