Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

css3 border radius only working properly in firefox

Discussion in 'Website Design Forum:' started by wwl777, Jan 5, 2011.

  1. wwl777

    wwl777 Junior Member

    I've been using css3 border-radius for the first time. After testing I noticed that in opera, chrome and safari the borders are displayed weirdly.

    In Firefox:

    Same thing in Opera/Chrome/Safari:


    CSS Code:

    .tbl-img {    height: 300px; width: 200px;    border-bottom: 26px solid #2E737C;    margin: 0 10px;                border-radius: 3px;        -moz-border-radius: 3px;        -webkit-border-radius: 3px;    }

    <div class="tbl-img" style="background: url(images/photo_green_4.jpg) no-repeat; "></div>
    Any idea why? Thanks in advance.
  2. Sunburn

    Sunburn Active Member

    Hi ww1777

    Incase you missed it, why not introduce yourself first to the community here....

    In order to answer your question however,

    The problem Is because your only specifying the bottom border! as such the border radius will curve in the very bottom most corner bits back into itself.

    if you declare the left and right border properties also, the curve, would intersect with the left and right border creating the smooth curve your looking for (visually)

    .tbl-img {    height: 300px; width: 200px;*  border-left: 26px solid #2E737C;*  border-right: 26px solid #2E737C;    border-bottom: 26px solid #2E737C;    margin: 0 10px;    border-radius: 3px;   -moz-border-radius: 3px;   -webkit-border-radius: 3px;    }
  3. wwl777

    wwl777 Junior Member

    Thanks for your reply sunburn. I'm sorry, I already wondered if there maybe was an intro section, but I hadn't taken time to look for it. Now I've just posted a message there!

    About your solution; i see something in what your saying , because it is indeed working propery on other parts of the site that don't have a specific border set. But when I try the code it just adds a 26px border to the left and right of the image. Result:

  4. Harry

    Harry Senior Member

    Blind guess, try this code:

  5. Sunburn

    Sunburn Active Member

    Hi ww1777,

    Sorry I not got safari here with me at the moment, but you could try the following....

    <div class="border">		<div id="content">		</div>	</div>
    .border {    width: 148px; /* - the left and right border width  ala 200px - 26px - 26px/*    border: 26px solid #2E737C;    border-top:0;        -moz-border-radius:3px;    -webkit-border-radius:3px;    -o-border-radius:3px;      border-radius:3px;    }#content {	height: 300px;  /* just to confine the hotlinked image */        width: 200px; /* just to confine the hotlinked image */	margin-left:-26px; /* negetive value of your side border */	background:  url( no-repeat 0 0;}

    PS. cheers Harry didnt read about it needing to be opera as well.

    PPS. I have no idea if it works using ie6 at the mo lol
  6. Harry

    Harry Senior Member

  7. Sunburn

    Sunburn Active Member

    Yes that will work Harry, but he's using a background image in css, thus the image is not "on top" of the border.
    If he adjusts his code to yours = win :)
  8. Harry

    Harry Senior Member

    Updated to use BG image:

    However I question the use of an empty element so using an image without alt text may well be better (view source for commented out version).
  9. Sunburn

    Sunburn Active Member

  10. Harry

    Harry Senior Member

  11. Harry

    Harry Senior Member

    Did this work?
  12. wwl777

    wwl777 Junior Member

    Thanks both! Was having dinner. The example you gave is really helpful. What makes it a bit more complex is that I can't do the markup in my css file, because I have a different image for every page ($img source generated with php)

    echo '<div style="height:300px; width:200px; padding-bottom: 26px; background: url(images/'.$img.') no-repeat #2E737C; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius:3px; -o-border-radius:3px; border-radius:3px;"></div>';
    Is working!

    I had a similar problem with my navigation looking like this in opera:.


    But after applying the same principle

    nav li {    background: #8db9bf;    padding-left: 10px;}nav li:hover {    background: #738C8F;    padding: 0 10px;    border-radius: 3px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    -o-border-radius:3px;    }.buttons a:link, .buttons a:visited {color: #1C3C40;    background-color: #ffffff;    padding: 2px;    padding-left: 6px;    display: block;    text-decoration: none;    text-align: left;    margin-top: 1px;    }.buttons a:hover, .buttons a:active {border-left: 10px solid #738C8F;    text-decoration: none;    color: #1C3C40;    text-shadow: 1px 1px 1px #8db9bf;     /*border-right: 10px solid #738C8F;*/    border-left: 0px;    }
    Tadaa, it now has the same result as in firefox:


    :clap:Its a bit messy, my first job with border radius, but this will help me whenever I need to achieve the same.

    Oh , btw I wanted to add the question if I need to declare all 4 (border-radius , -moz-border-radius , -webkit-border-radius and -o-border-radius) every time I do something with border-radius?
  13. Harry

    Harry Senior Member

    Good stuff, glad it's working :)

    Yeah you need to specify all four, it doesn't matter which order as long as non-prefixed one (e.g. border-radius) is last.


Share This Page