Border Radius And Border Image In Ie And Opera

[catfish]

I've spent all morning preparing this link for testing purposing so I can maybe (hopefully) make it easier to get some help. I previously built a custom website for a client which they like very much. He is a welder so you will see how the gaudy border comes into play (LOL). I managed to build the border and it works well enough in all 5 browsers but I know it isn't the proper way of building a border these days. here is the link but its just to show the border

I am in the development stage of redoing the website in Wordpress and trying to do the border on it properly. So for testing purposing I started this page using examples and small tutorials. You will see my metal border and border-radius works on 3 out of those 5 browsers. Here it is Border Testing

I don't imagine I need to paste all the code in here but will do so to save time;

#wrap{
margin:100px auto;
padding: 12px;
width:400px;
height:300px;
border: 18px solid pink;
-moz-border-radius: 15px;
border-radius: 15px;
}

#wrapper2{
margin:100px auto;
padding: 12px;
width:300px;
height:auto;
border: 18px solid green;
-moz-border-radius: 15px;
border-radius: 15px;
}

/********I REALLY WANT THIS METAL BORDER TO WORK***********/

#metal-border{
position:relative;
margin:100px auto;
padding: 12px;
width:400px;
height:300px;
border-style: solid;
border-width: 31px 29px 32px 26px;
-moz-border-image: url(images/outer_border.png) 31 29 32 26 round;
-webkit-border-image: url(images/outer_border.png) 31 29 32 26 round;
-o-border-image: url(images/outer_border.png) 31 29 32 26 round;
border-image: url(images/outer_border.png) 31 29 32 26 round;
}

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

.box2 {
width: 200px;
height: 150px;
margin: 0 auto 35px auto;
padding: 15px;
border: 11px solid #c6ac6c;
position: relative;
margin-top: 35px;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
-moz-box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #000;
box-shadow: 10px 10px 10px #000;
z-index: 2;
behavior: url(ie-css3.htc);
}

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

 

HTML

<div id="container">

<div id="metal-border">one I really want for my container

</div>

<div id="wrap" class="box">Lorem ipsum dolor sit amet, consectetuer

adipiscing

elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna

aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat. <br>

<br>

Duis autem vel eum iriure dolor in hendrerit in

vulputate velit esse molestie consequat, vel illum dolore eu feugiat

nulla facilisis at vero eros et accumsan et iusto odio dignissim qui

blandit praesent luptatum zzril delenit augue duis dolore te feugait

nulla facilisi.

</div>

<div class="box2">this is the cat box code copied from

http://fetchak.com/ie-css3/

seems to work in all but Internet Explorer and Opera</div>

<div id="wrapper2" class="rounded-corners">

<img src="images/present-tree.png" align="middle"></div>

</div>

[newseed]

Border-image is not support for IE 10 or earlier. I am not sure about Opera because I have not used in in years. Check out the link below for more info.

 

CSS3 Browser Support

[catfish]

Ok, thanks and I guess I knew that, read it, tested it but thought someone may have a bag of tricks..LOL Actually what I need is an alternative code so that when it is viewed in IE and Opera it will still look alright.