Jump to content

Border Radius And Border Image In Ie And Opera


Recommended Posts

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;

margin:100px auto;
padding: 12px;
border: 18px solid pink;
-moz-border-radius: 15px;
border-radius: 15px;

margin:100px auto;
padding: 12px;
border: 18px solid green;
-moz-border-radius: 15px;
border-radius: 15px;


margin:100px auto;
padding: 12px;
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;



<div id="container">

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


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


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>


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 class="box2">this is the cat box code copied from


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>


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...