Emulating CSS3 border-radius and box-shadow in IE7/8

Posted by Adam Maras on Stack Overflow See other posts from Stack Overflow or by Adam Maras
Published on 2010-04-22T02:05:42Z Indexed on 2010/04/22 2:13 UTC
Read the original article Hit count: 487

Filed under:

css3

|

border-radius

|

box-shadow

|

internet-explorer

I'm working on HTML for a small web application; the design calls for a content area with rounded corners and a drop shadow. I've been able to produce this with CSS3, and it works flawlessly on Firefox and Chrome:

CSS3 Version

However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story:

Internet Explorer Version

Is there an easy, lightweight JavaScript solution that would allow me to either 1) use IE-specific features to achieve this, or 2) modify the DOM (programmatically) in such a way that adds custom images around the content area to emulate the effect?

© Stack Overflow or respective owner

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More

Related posts about border-radius

Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector… >>> More
Validating -moz-border-radius / -webkit-border-radius

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, is there any way to validate -moz-border-radius / -webkit-border-radius in the CSS validator? The client wants validation buttons in the sidebar (ugh!) and I can't find any way to bypass it. I've used @import too, no success. >>> More
Rounded Corners and Shadows – Dialogs with CSS

as seen on West-Wind - Search for 'West-Wind'
Well, it looks like we’ve finally arrived at a place where at least all of the latest versions of main stream browsers support rounded corners and box shadows. The two CSS properties that make this possible are box-shadow and box-radius. Both of these CSS Properties now supported in all the major… >>> More
How to manually patch Blogger template to use Disqus

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to add disqus to my blog and I tried following this guide to do so: http://disqus.com/docs/patch-blogger/ However their instructions are completely off with what I have on my custom template. Here is the template: <b:skin><![CDATA[/*----------------------------------------------- Blogger… >>> More
CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello all! First post on here so please be kind :) I am in the process of trying to get my head properly around CSS3 Gradients (specifically radial ones) and in doing so I think I've set myself a relatively tough challenge. In Adobe Illustrator I have created a 'button' style which can be seen here:… >>> More