Inside radius corners for the Center Column

Michael · #1 Apr 15, 2010, 08:47 PM

I successfully added inside radius corners to the Center Column area border by using css3 code in the Center column style text box to insert multiple background images as follows:

PHP Code:


			
background-color: #ffffcc;

background-image: url(/mysite/wp-content/themes/atahualpa/images/upper-left-center.png)

                  url(/mysite/wp-content/themes/atahualpa/images/upper-right-center.png)

                  url(/mysite/wp-content/themes/atahualpa/images/lower-left-center.png)

                  url(/mysite/wp-content/themes/atahualpa/images/lower-right-center.png);

background-repeat: no-repeat;

background-position: top left, top right, bottom left, bottom right;

border: solid 2px #933333;

This is rendered properly by the latest Windows versions of Firefox, Chrome, Opera and Safari. Here is a screen shot:

Click image for larger version

Name: ff-screen.png
Views: 1130
Size: 24.0 KB
ID: 468

(Click on image for larger view.)

IE ignores the css3 code and renders the area with square corners. Since the various versions of IE have about a 55% to 60% share of browser users, it would be worth the time to code for IE as well. My knowledge of HTML / CSS is only average. I have a general idea how to accomplish this using div's, but I would like to know if it would be practical within the context of Atahualpa theme options. And if it is, a little help in the right direction would be greatly appreciated.

Thanks,
Michael