3D Border Demo

3rd October 2003 · Last updated: 5th October 2016


I created a demo page to test Opera 7.2's extra padding effect, which breaks my current layout used here. But I couldn't recreate the problem. However I ended up with an interesting way to use CSS borders to create 3D effects. My 3D Border Demo looks like the walls curve at the top, there are steps at the bottom, and bars in the middle. See what you think.

Comments (2)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Claire:
    OMG.. Chris.. I haven't even looked to see how that's done yet.. but it's absolutely gorgeous ;-)

    Put in in the site somewhere quick!

    Posted on 3rd October 2003 at 10:05 pm
  2. LiteraryMoose:
    Chris, this 3D "door" is absolutely fantastic! Now think what will happen once CSS3 border values will be supported where you will be allowed to use... background images! 3D borders with images. Can you see this??? I've been waiting for this feature to be implemented, as this feature alone will revolutionize the display of web pages as nothing in CSS has ever done. Your "door" is really a door - to the future.

    Gaude laudamus te Door.

    best regards,


    Posted on 9th October 2003 at 1:18 pm