www.webdeveloper.com
Results 1 to 2 of 2

Thread: border-radius and border-image issues in IE and Opera

  1. #1
    Join Date
    Jul 2006
    Posts
    110

    border-radius and border-image issues in IE and Opera

    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;
    Code:
    #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>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    I think it would look better if you used nested <div>s to display the border. It would certainly be easier to code and maintain. Make a new version of the border background image large enough to fill the containing <div>, then just use 'backrgound-size' to make it "responsive". Something like:
    Code:
    <style type="text/javascript">
    #outer {
       padding:40px;  /* or however wide you want the border */
       background-image:url('new_bg.jpg');
       background-repeat:no-repeat;
       background-position:left top;
       background-size:cover;
    }
    Then you can just remove the #top and #bottom.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles