css3 border radius only working properly in firefox

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:
imgborderfirefox.jpg


Same thing in Opera/Chrome/Safari:

imgborderopera.jpg


CSS Code:

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;    }

HTML:

Code: 
<div class="tbl-img" style="background: url(images/photo_green_4.jpg) no-repeat; "></div>

Any idea why? Thanks in advance.
 
Hi ww1777

Incase you missed it, why not introduce yourself first to the community here....
http://www.designforums.co.uk/introductions/

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)


Code: 
.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;    }
 
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:

imgborderopera2.jpg
 
Blind guess, try this code:

Code: 
img{padding-bottom:26px;background:#2E737C;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;border-radius:3px;}
 
Hi ww1777,

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

Code: 
<div class="border">		<div id="content">		</div>	</div>

Code: 
.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(http://www.thesunblog.com/gourmetgal/apples.jpg) no-repeat 0 0;}

Geoff

PS. cheers Harry didnt read about it needing to be opera as well.
-o-border-radius:3px;

PPS. I have no idea if it works using ie6 at the mo lol
 
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 :)
 
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)

Code: 
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:.

navopera.jpg


But after applying the same principle

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

navopera2.jpg


: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?
 
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.

H
 
You must log in or register to reply here.
Back
Top